VueX总结(一)

1.介绍

首先Vuex是Vue的核心插件(还没了解vue的可以到 vue官网 学习下),所以使用VueX之前必须有Vue,是用来集中存储组件状态(也就是数据).我们需要搞清楚一点项目中是不是真的需要用vuex,不要为了使用vuex而使用vuex

2.基础使用及注册

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代码过多,各个功能模块之间解耦合.

3.state

用来存储数据的就像vue中的data,这里有个小点就是不要state:{}里直接写对象最好return{},防止数据被随意或不小心修改而污染

 state(){  //存放数据
    return {  //防止污染
      count: 0,
      str: 'cas'
    }
  },

mapState 辅助函数

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,
    })
},

4.getter

getter其实也很简单就想到与vue的computed计算属性,this.$store.getters.doneTodos调用

getters:{  //state的计算属性
    doneTodos: state => {
      return state.str+'C';
    }
  },

mapGetters 辅助函数和mapState一样就是一个映射的是Getter,这里我就不讲了

5.mutation

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,....)

6.action

action是用来提交mutation,不是直接改变store值得,就类似于代理设计模式,就是在mutation方法上包装增强一下,而且action中是可以做异步操作的.

  actions:{  //异步 (调用接口)
    increment(context){
      context.commit('increment');
    },
    increment1({commit}){
      console.log(commit)
      commit('increment1');
    }
  },


this.$store.dispatch('increment')  调用

mapActions 辅助函数

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')`
    })
  }
}

7.module

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里这种代码会简洁易读

命名空间

namespaced: true,  

允许子模型对应方法注册再自己的路径下,防止vuex中有同名的方法 调用一起触发

在带命名空间的模块内容访问全局内容

简单的说就是调用不懂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
    })
}

模块动态注册

    // 注册模块 `myModule` (动态加载管理) vuex-router-sync
    //store.unregisterModule(moduleName)  注销
    //store.registerModule('a', module, { preserveState: true })  preserveState 是否让浏览器保存
    store.registerModule('myModule', {
      state: {
        data1:'registerModule1',
      },
    })
    store.registerModule(['myModule', 'nested'], {
      state: {
        data1:'registerModule2',
      },
    })
    console.log(this.$store.state.myModule.data1+'-registerModule')
    console.log(this.$store.state.myModule.nested.data1+'-registerModule')