温故而知新之Vuex

简介

Vuex的状态（state）是响应式的
不能直接修改store中的状态（state）,唯一的途径就是 提交（commit）mutation，为了明确的追踪到stated的变化

const store = new Vuex.Store({
  state: {
      count: 0
    },
  mutations: {
    increment(state){
        state.count++
      }
    }
})

store.commit('increment')  // 提交
store.state.count // 0 获取

State

单一状态树
mapState辅助函数

computed: mapState({
    count: state => state.count
})

#对象展开运算符

computed: {
  ...mapState({
  ...
 })
}

Getter

可以认为是store的计算属性

const store = new Vuex.Store({
  state: {...},
   getters: {
    done: state=> {
      return ...
    }
  }
})

通过属性访问

store.getters.xx

通过方法访问
mapGetters 辅助函数

import { mapGetters } from 'vuex'
export default {
    computed: {
      ...mapGetters([
        'xxx',
        'ttt'
      ])
    }
}

Mutation 同步函数

类似事件
每个mutation都有一个事件类型（type）和一个处理函数（handler）
提交载荷（payload）

mutations: {
  increment (state, obj){
    state.count +=obj.n
  }
}

store.commit('increment', {n:10})
// 对象风格的提交方式
store.commit({
  type: 'increment',
  n:10
})

#在组件中提交mutation

this.$store.commit('xxx')

import { mapMutations } from 'vuex'
export default {
    methods: {
      ...mapMutations([
          'increment',
          'xxx'
        ])
    }
}

Action

• Action提交mutation，而不是直接变更状态
• Action可以包含异步操作

actions: {
  inc(context){  // context对象 就是 store实例上下文的副本
    context.commit('increment')
  }
}

#分发Action

store.dispatch('inc')

#Actions 支持同样的载荷方式和对象方式进行分发
#在组件中分发Action

this.$store.dispatch('xxx')

import { mapActions } form 'vuex'
export default {
    methods: {
      ...mapActions([
          'inc',
          'xxx'
      ])
    }
}

#组合Action
返回Promise对象

Module

const store = nwe Vuex.Store({
    modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a // moduleA的状态

#模块的局部状态
对于模块内部的 action，局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState

const moduleA = {
  getters: {
      fs(state, getters, rootState){
          ...
      }
  }
  actions: {
      xx({state, commit, rootState}){ ...}
  }
}

#命名空间
默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应
如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名

 modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      }
}

#在带命名空间的模块内访问全局内容
若需要在全局命名空间内分发 action 或提交 mutation，将 { root: true } 作为第三参数传给 dispatch 或 commit 即可
#在带命名空间的模块注册全局 action
若需要在带命名空间的模块注册全局 action，你可添加 root: true，并将这个 action 的定义放在函数 handler 中
#createNamespacedHelpers

模块动态注册

store.registerModule('myModule', {
..//
})

store.unregisterModule(moduleName) 来动态卸载模块
注意，你不能使用此方法卸载静态模块（即创建 store 时声明的模块）。