vuex

概念

• state：驱动应用的数据源

  • state由mutations来更改，当computed绑定state时可以用mapState语法糖

    import { mapState } from 'vuex'
    computed: {
        name:function(){
            return this.name
        },
     ...mapstate({
            count:state => state.count,
        })   
    }
    

• getters：为组件提供经过处理的数据源

  • const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })
    store.getters.doneTodos 
    

  • getters内部的getter可以相互调用

  • getters: {
      // ...
      getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }
    store.getters.getTodoById(2)//可以传递参数来调用gettes 
    

  • mapGetters同mapState一样是语法糖可以将gettes映射到计算属性上

     computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
      /////////
      mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })
    

• mutations：用来更改state的唯一方式

  • store.commit('handle')
    

  • 可提交载荷（payload）

    mutations: {
      increment (state, payload) {
        state.count += payload.num
      }
    }
    store.commit('increment',{num:1,name;'pig'})//调用
    

  • mutations必须是同步函数

  • mutations同样有mapMutations语法糖

      methods: {
        ...mapMutations([
          'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    
          // `mapMutations` 也支持载荷：
          'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
        ]),
        ...mapMutations({
          add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
        })
      }
    

• actions：调用actions来提交mutations

  • const store = new Vuex.Store({
      state: {
        count: 0
      },
      mutations: {
        increment (state) {
          state.count++
        }
      },
      actions: {
        increment (context) {
          context.commit('increment')
        }
      }
    })
    store.dispatch('increment')//调用
    

    const {commit,state,getters}= context

  • mutations不可进行异步操作，而actions不受限制

  • actions和mutations一样支持载荷以及对象方式分发

    // 以载荷形式分发
    store.dispatch('incrementAsync', {
      amount: 10
    })
    
    // 以对象形式分发
    store.dispatch({
      type: 'incrementAsync',
      amount: 10
    })
    

  • 在组件中调用this.$store.dispatch('xxx')过于繁琐，同样有apActions语法糖

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

• moduels：每个module都有自己的state，getters，actions，mutations。

  • 使用单一的状态树时，项目庞大导致代码不易于管理，可以将store分割成module，每个模块拥有自己的state，getters，mutations，actions

    const moduleA = {
      state: { ... },
      mutations: { ... },
      actions: { ... },
      getters: { ... }
    }
    
    const moduleB = {
      state: { ... },
      mutations: { ... },
      actions: { ... }
    }
    
    const store = new Vuex.Store({
      modules: {
        a: moduleA,
        b: moduleB
      }
    })
    
    store.state.a // -> moduleA 的状态
    store.state.b // -> moduleB 的状态
    

  • namespaced:boolean,vuex内部的action，mutation和getter都是注册在全局命名空间的，当模块需要高度封装和复用的时候，设置namespaced:true调用路径需要加上模块名。

  • 在调用全局state和getter时，getter第三个参数为rootstate，rootGetters，也会通过context传入到action