vuex的实用知识点

本文系统介绍vuex的全部内容

1. 为什么用vuex

   组件通信知道吧，相信很多同学，刚学的时候很难懂，实时上在实际应用中，大型项目如果使用最原始的组件通信会非常的麻烦，主要体现在多层嵌套的组件之间的通信，使用vuex可以很方便的处理和维护state
   

2. 开始

   1.vuex的特点
       **当store容器中的数据发生变化了，那么组件中的数据也会跟着发生变化
       **更改store中的state值，必须使用commit
   2.安装
       npm install vuex --save
       Vue.use(Vuex)
   3.基本使用
       const store = new Vuex.Store({
           state: {
               count: 0
           },
           mutations: {
               increment(state){
                   state.count++
               }
           }
       })
   

3. state

   在单文件系统中，组件都是单独的文件如果想访问到vuex的store中的数据需要重复的导入store文件，非常麻烦，可以使用如下方式，只需导入一次即可
       const app = new Vue({
           el: '#app',
           store,
           ...
       })
   就是将store实例，直接赋值给vue根组件的store属性，然后在此根组件下面所有的子组件都可以通过this.$store.state访问到store中的state
   一般获取到store中的某个属性值，会在组件中使用计算属性重新声明一个属性，如下
       const Counter = {
           template: '<div>{{count}}</div>',
           computed: {
               count(){
                   return this.$store.state.count
               }
           }
       }
   如果你需要的属性值，很多，那么你叫重复的写很多类似的代码，很麻烦，这时可以使用mapState辅助函数，使用方法如下
       import {mapState} from 'vuex' //导入辅助函数
       export default {
           computed: mapState({
               count: state => state.count // 不做任何处理直接导入
               count: 'count' // 和上面的作用一样
               count // 同名的可以直接简写
               count(state){
                   return state.count + this.otherValue
               } // 做特殊处理
           })
       }
   上面可以看到一个mapState将一个computed全占了，这时我要是有自己的计算属性可以使用对象展开运算符
       computed: {
           localComputed(){},
           ...mapState({
               //...
           })
       }
   

4. getters

   有些store中的state，并不是组件中需要的数据，而组件要的是基于这个state通过计算后的值，这时可以在store中使用getters选项，这和组件的computed的功能是一模一样的
       const store = new Vuex.Store({
           state: {
               a: 1
           },
           getters: {
               incre: state => {
                   return state.a + 1
               }
           }
       })
       那么incre就是2了
       可以通过store.getters.a或者this.$store.a访问
       还可以传递其他的getters，后面具体讲解
           incre: (state,getters) => {
               return getters.a + 1
           }
   mapGetters函数的使用
       和mapState一样
       import { mapGetters } from 'vuex';
       export default {
           computed: {
               ...,
               ...mapGetters([
                   'incre'
               ])
           }
       }
   

5. mutations

   mutation就是用来同步的修改state中的数据的
       const store = new Vuex.Store({
           state: {
               count: 1
           },
           mutations: {
               increment(state,value){
                   state.count++
               }
           }
       })
       调用mutation中的方法需要 store.commit('increment')
       传递数据 store.commit('increment', 10)
       为了保证好的代码风格，可以统一的传递对象
           mutations: {
               increment (state,payload) {
                   state.count += payload.amount
               }
           }
           store.commit('increment',{
               amount: 10
           })或者
           store.commit({
               type: 'increment',
               amount: 10
           })
   注意：mutation只能写同步的函数，至于原因是vue的devtool无法捕捉状态，这个devtool几乎用不上
   使用mapMutations函数
       在组件中使用mutations中的函数，最好都放在methods里面，方便管理
           import { mapMutations } from 'vuex'
           methods: {
               ...,
               ...mapMutations([
                   'increment'
               ])
           }
   

6. actions

   其实actions的功能和methods类似，可以用来处理异步的函数，然后将结果通过mutation传递
       actions: {
           incre(context){
               context.commit('increment')
           }
       } // context 具有和store相同的属性和方法
       也可以使用es6的语法
       actions: {
           incre({commit}) {
               commit('increment')
           }
       }
       触发action中的方法 store.dispatch('incre')
       或者
       store.dispatch('incre',{
           amount: 10
       })
       或者
       store.dispatch({
           type: 'incre',
           amount: 10
       })
   使用mapActions函数
       import { mapActions } from 'vuex';
       export default {
           ...,
           ...mapActions([
               'increment'
           ])
       }
   

7. modules

   这部分内容其实就是将如何将一个store拆分成多个小的store
       const moduleA = {
           state: {...},
           ...
       }
       const store = new Vuex.Store({
           modules: {
               a: moduleA
           }
       })
       这就把A模块合并到store中了，通过store.state.a访问moduleA的state
       你要清楚，本质上着就是合并对象，所以你可以使用平常的methods和mutations等使用方法，因为他们实际上就是合并成了一个methods或者mutations等，所以这样就会有一个问题，子模块和子模块、主模块之前的命名冲突问题，但是注意，细心的同学可能发现了，上面介绍的store.state.a这样不可能出现命名冲突，这是对的，因为vue默认只对state做了分开的处理，所以你在子模块中的actions这类的属性中访问到主模块store中的数据必须传递第三个参数rootState，如下
           const moduleA = {
               actions: {
                   incre({state,commit,rootState}) {
                       ...
                   }
               }
           }
   要解决上面提到的命名冲突的问题就要使用到命名空间，如下
       const moduleA = {
           // 添加下面这句话，这个模块就是独立的了，不会和外界发生冲突
           namespaced: true,
           // state不会受到命名空间的影响
           // 在外界要访问到此模块的getters,actions等，需要添加路径
           getters: {
               isAdmin(){....} // getters['moduleA/isAdmin']
           }
       }
       在命名空间中访问主模块的数据要添加 rootState,rootGetters
       细节自查官网，用的真心很少，不同的模块的actions这类的名字能取成一样的也是奇葩
   

结语

还有一部分内容对于开发来说，没有任何作用，学习就要把自己宝贵的时间放在对你最有用的东西上面

这部分内容是我关于vue的最后的一篇知识归纳，以后将全身心的投入到react的学习当中