vuex的基本使用

基本概念

• state 基本库
• getters 类似computer计算属性
• actions 所有的【异步操作】在此执行
• mutations 在这里才能修改state中的值
• 对应的辅助方法：mapState、mapGetters、mapActions、mapMutations

在vue组件中常用的api

• this.$store.dispatch 派发一个动作，触发action
• this.$store.commit 提交一个mutation(修改state)

用法

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex) // 要use一下

export default new Vuex.Store({
  state: { name: '' },
  getters: {
     getName (state) { 
          return state.name 
    }
  },
  actions: {
        getName ( {commit} ) {
               // 模拟异步
              setTimeout(() => {
                     commit("setName", "chaos")
               }, 1000)
       }
  },
  mutations: {
       setName(state, params) { 
            state.name = params
      }
  }
})

---

扩展

module

https://vuex.vuejs.org/zh/guide/modules.html

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 的状态

严格模式

https://vuex.vuejs.org/zh/guide/strict.html 在严格模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。 不要在发布环境下启用严格模式： process.env.NODE_ENV !== 'production'

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})