关于vuex的原理及使用方法
作者:Cshaosun
简介
Vuex 是 Vue.js 应用的状态管理模式,它为应用内的所有组件提供集中式的状态(数据)管理。
可以帮我们管理 Vue 通用的数据 (多组件共享的数据)。
Vuex的构成
state
:state 是 Vuex 的数据中心,也就是说state是用来存储数据的。getters
:state 对象读取方法。Vue Components 通过该方法读取全局 state 对象。mutations
:状态改变操作方法。是 Vuex 修改 state 的唯一推荐方法,其他修改方式在严格模式下将会报错。 该方法只能进行同步操作, 且方法名只能全局唯一。 操作之中会有一些 hook 暴露出来, 以进行state 的监控等。actions
:操作行为处理模块。 负责处理 Vue Components 接收到的所有交互行为。 包含同步/异步操作, 支持多个同名方法, 按照注册的顺序依次触发。 向后台 API 请求的操作就在这个模块中进行, 包括触发其他 action 以及提交 mutation 的操作。 该模块提供了 Promise的封装, 以支持 action 的链式触发。modules
:将 Store 分割成模块,每个模块拥有自己的 State、Getters、Mutations Actions。
Vuex的使用
1、安装 Vuex:npm install vuex
。
2、创建store示例
store对象
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment({ commit }) { commit('increment'); } }, getters: { count: state => state.count } });
在 Vue 根实例中注册store
import Vue from 'vue'; import App from './App.vue'; import store from './store'; new Vue({ store, render: h => h(App) }).$mount('#app');
在组件中使用 Store
export default { computed: { count() { return this.$store.state.count; } }, methods: { increment() { this.$store.dispatch('increment'); } } };
使用Vuex内容扩展
在真正开发中使用vuex时会有好多细节知识和注意事项,下面我们扩展一下,仅供参看
Vue 组件中获得 Vuex 状态(State)
方式一: this.$store.state获取
通过在根实例中注册 store 选项,该 store 实例会注入到根组件下的所有子组件中,且子组件能通过 this.$store 访问到
computed: { count () { return this.$store.state.count } }
方式二: mapState 辅助函数获取(推荐)
当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性
<template> <div>{{count}}</div> </template> <script> import { mapState }from 'vuex export default{ computed:{ ...mapstate(['count']) } } </script>
Getter的定义和获取方式
定义getters:
需要显示所有大于5的数据,正常的方式,是需要list在组件中进行再一步的处理,但是getters可以帮助我们实现它
【下面getters引用的state中的数据:list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]】
getters: { // getters函数的第一个参数是 state // 必须要有返回值 filterList: state => state.list.filter(item => item > 5) }
获取getters:
方式一: 通过属性访问
this.$store.getters.filterList
方式二:辅助函数 - mapGetters
<template> <div>{{filterList}}</div> </template> <script> import { mapGetters }from 'vuex export default{ computed:{ ...mapGetters(['filterList']) } } </script>
Vue组件中调用Vuex:mutations中的方法
- 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
- 通过 mapMutations 映射
1、默认根级别的映射 mapMutations([ ‘xxx’ ])
2、子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间
方式一:普通调用方式
- this.$store.commit('addCount') 此为不带参数的写法
- this.$store.commit('addCount', 10) 此为带参数写法
<template> <div @click="addData">{{count}}</div> </template> <script> export default{ methods: { addData() { this.$store.commit('increment') } } } </script>
方式二:辅助函数- mapMutations
mapMutations是将所有mutations里面的方法映射为实例methods里面的方法
<template> <div @click="addData">{{count}}</div> <div @click="increment">{{count}}</div> </template> <script> export default{ import { mapMutations } from 'vuex' methods: { // 有别名的写法[对应第一行div] ...mapMutations({ addData:'increment' }) // 同名的简写[对应第二行div] ...mapMutations(['increment']) } } </script>
Vue组件获取Vuex:actions中的方法
- 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
- 通过 mapActions 映射
1、默认根级别的映射 mapActions([ ‘xxx’ ])
2、子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间
方式一:普通调用方式
this.$store.dispatch('increment') this.$store.dispatch('increment',{num: 10})
<template> <div @click="addData">{{count}}</div> </template> <script> export default{ methods: { addData() { this.$store.dispatch('increment') } } } </script>
方式二:辅助函数 -mapActions
mapActions 是把位于 actions中的方法提取了出来,映射到组件methods中
<template> <div @click="increment">{{count}}</div> </template> <script> export default{ import { mapActions } from 'vuex' methods: { ...mapActions (['increment']) } } </script>
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。