首先Vuex是Vue的核心插件(还没了解vue的可以到 vue官网 学习下),所以使用VueX之前必须有Vue,是用来集中存储组件状态(也就是数据).我们需要搞清楚一点项目中是不是真的需要用vuex,不要为了使用vuex而使用vuex
vuex.js下载地址
<script src="/path/to/vue.js"></script> <script src="/path/to/vuex.js"></script>npm
npm install vuex --save import Vuex from 'vuex' import Vue from 'vue' Vue.use(Vuex); //gitHub dome查看 const moduleA = { state: { count: 100 }, mutations: { increment (state) { // 这里的 `state` 对象是模块的局部状态 state.count++ } }, getters: { doubleCount (state, getters, rootState) { return state.count * 2 +rootState.count; } } }; export default new Vuex.Store({ state(){ //存放数据 return { //防止污染 count: 0, str: 'cas' } }, getters:{ //state的计算属性 doneTodos: state => { return state.str+'C'; } }, mutations:{ //同步 /** * @param state state中注册值 * @paramList 自行添加至 */ increment(state){ state.count++ }, increment1(state){ state.count++ }, }, actions:{ //异步 (调用接口) increment(context){ context.commit('increment'); }, increment1({commit}){ console.log(commit) commit('increment1'); } }, modules:{ //模块的局部状态 可以按模块组件划分 a:moduleA, account: { namespaced: true, //允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发 // this.$store.dispatch('account/login') // this.$store.dispatch('account/login1') // this.$store.dispatch('account/posts/login2') state: { account:'account' }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响 actions: { login ({ state, commit, rootState }) { commit('login') } }, mutations: { login (state) { console.log('account'+state.account) }, incrementcccc () { console.log('accountincrement') } }, // 嵌套模块 modules: { // 继承父模块的命名空间 myPage: { state: { dome1:'21', }, actions: { login1 ({ state, commit, rootState }) { commit('login1') } }, mutations: { login1 (state) { console.log('myPage'+state.dome1) }, }, }, // 进一步嵌套命名空间 posts: { namespaced: true, state: { dome1:'21', dome2:'22', }, actions: { login2 ({ state, commit, rootState }) { commit('login2'); commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法 } }, mutations: { login2 (state) { console.log('posts'+state.dome1) }, }, }, foo: { namespaced: true, actions: { someAction: { root: true, //可以注册全局的无视路径调用 handler (namespacedContext, payload) { console.log('外部调用') } // -> 'someAction' } } } } } } })上面是我随便写的store文件,我先使用webpack搭建了个项目,然后使用 import导入 new Vuex.store创建vuex,然后到new Vue 的store里注册.这里我把store单独提到了一个文件里,通过export defaut讲整个Vuex.store抛出去,然后import到main.js注册,这样可以防止mian代码过多,各个功能模块之间解耦合.
用来存储数据的就像vue中的data,这里有个小点就是不要state:{}里直接写对象最好return{},防止数据被随意或不小心修改而污染
state(){ //存放数据 return { //防止污染 count: 0, str: 'cas' } },state中有个辅助函数,是将state中的对象映射的vue的计算属性中,有人会问mapState怎么来,这个vuex已经暴露出来了 我们只需要 import {mapState} from 'vuex'
computed:{ computeddeom1:function () { return this.deom1+3; }, ...mapState({ //计算数据可以直接调用 vuex state 中数据 count:state => state.count, conutAlias :'count', }), //同个模块下多个相同的 ...mapState({ a:state => state.account.posts.dome1, d:state => state.account.posts.dome2, }), ...mapState('account/posts',{ b:state => state.dome1, c:state => state.dome2, }) },getter其实也很简单就想到与vue的computed计算属性,this.$store.getters.doneTodos调用
getters:{ //state的计算属性 doneTodos: state => { return state.str+'C'; } },mutation是用来改变store中数据值得唯一方式,而且mutation中只能执行同步操作不能执行异步
mutations:{ //同步 /** * @param state state中注册值 * @paramList 自行添加至 */ increment(state){ state.count++ }, increment1(state,data,...){ state.count++ }, }, this.$store.commit('increment') 如果有多个参数就 this.$store.commit('increment',a,b,....)action是用来提交mutation,不是直接改变store值得,就类似于代理设计模式,就是在mutation方法上包装增强一下,而且action中是可以做异步操作的.
actions:{ //异步 (调用接口) increment(context){ context.commit('increment'); }, increment1({commit}){ console.log(commit) commit('increment1'); } }, this.$store.dispatch('increment') 调用mapAction和mapGetter mapState原理一样就是先将action中方法映射到 vue 的 methods中
这段是官网代码 import { mapActions } from 'vuex' export default { // ... methods: { ...mapActions([ 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')` // `mapActions` 也支持载荷： 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)` ]), ...mapActions({ add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')` }) } }module就是一个 state,getter,mutation,action,module的总和,对于轻型项目没必要使用module,把所有的状态都写到state中就行了
大型或逻辑复杂的项目模块组件多,如果都写在store下的state中的话会变得相当臃肿,耦合性强,不便于后期迭代和维护
modules:{ //模块的局部状态 可以按模块组件划分 a:moduleA, account: { namespaced: true, //允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发 // this.$store.dispatch('account/login') // this.$store.dispatch('account/login1') // this.$store.dispatch('account/posts/login2') state: { account:'account' }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响 actions: { login ({ state, commit, rootState }) { commit('login') } }, mutations: { login (state) { console.log('account'+state.account) }, incrementcccc () { console.log('accountincrement') } }, // 嵌套模块 modules: { // 继承父模块的命名空间 myPage: { state: { dome1:'21', }, actions: { login1 ({ state, commit, rootState }) { commit('login1') } }, mutations: { login1 (state) { console.log('myPage'+state.dome1) }, }, }, // 进一步嵌套命名空间 posts: { namespaced: true, state: { dome1:'21', dome2:'22', }, actions: { login2 ({ state, commit, rootState }) { commit('login2'); commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法 } }, mutations: { login2 (state) { console.log('posts'+state.dome1) }, }, }, foo: { namespaced: true, actions: { someAction: { root: true, //可以注册全局的无视路径调用 handler (namespacedContext, payload) { console.log('外部调用') } // -> 'someAction' } } } } } }module可以直接account:{} 也 可以import 对象 a:module
这里我建议第二张这种每个模块的module都在一个单独的js里这种代码会简洁易读
简单的说就是调用不懂module中的方法和值
commit('account/incrementcccc',null,{root:true}) posts: { namespaced: true, state: { dome1:'21', dome2:'22', }, actions: { login2 ({ state, commit, rootState }) { commit('login2'); commit('account/incrementcccc',null,{root:true}) //root用来掉用别的模块的方法 } }, mutations: { login2 (state) { console.log('posts'+state.dome1) }, }, }, foo: { namespaced: true, actions: { someAction: { root: true, //可以注册全局的无视路径调用 handler (namespacedContext, payload) { console.log('外部调用') } // -> 'someAction' } } }就是使用辅助函数按对应模块映射
computed:{ computeddeom1:function () { return this.deom1+3; }, ...mapState({ //计算数据可以直接调用 vuex state 中数据 count:state => state.count, conutAlias :'count', }), //同个模块下多个相同的 ...mapState({ a:state => state.account.posts.dome1, d:state => state.account.posts.dome2, }), ...mapState('account/posts',{ b:state => state.dome1, c:state => state.dome2, }) },也可以通过createNamespacedHelpers创建对应模块的命名函数
/** * createNamespacedHelpers 带命名空间的绑定函数 */ import { createNamespacedHelpers } from 'vuex' const { mapState, mapActions } = createNamespacedHelpers('account/posts') export default { // 在 `some/nested/module` 中查找 ...mapState({ a: state => state.dome1, b: state => state.dome2 }) }
