Vuex状态管理 梳理

const store = new Vuex.Store({ ...options })

• Vuex.Store 构造器选项
• Vuex.Store实例属性
• Vuex.Store实例方法
• 组件内的辅助函数

------------------------常见问题---------------------------

// Vuex 中更改state, state 根级属性修改需要 setter 中修改，如果是 引用数据，修改其内部 属性 可直接修改

Vuex.Store 构造器选项

• state选项: 哪些状态

  操作属性：Object | function(函数的类似data，返回一个对象，可重用)

  /*
  ***在 store对象 里面可以全局访问的变量
  *** state,       // 如果在模块中定义则为模块的局部状态
  *** getters,     // 等同于 store.getters
  *** rootState    // 等同于 store.state
  *** rootGetters  // 所有 getters
  *** context      // 包含上面所有，后面提及
  */
  // ----------------state---------------
  state:{
    name : 'lucy'
  }
  或者
  state: ()=>{
    name : 'lucy',
    sex : 'm'
  }
  // -----------------getters---------------
  // 传参 state、context 是为了函数体里面能访问到
  getters:{
    GET_NAME(state){
      return state.name },
    GET_SEX:state=>state.sex
  }
  // -----------------mutations---------------
  mutations:{  //必须时同步函数，因为日志里面需要能跟踪mutations，异步的无法跟踪，actions无需跟踪
    SET_NAME(state,value){
      state.name = value
    },
    SET_SEX(state,value){
      state.sex = value
    }
  }
  // ---------------actions---------------
  actions:{
    uppername(context,value){
      context.commit('SET_NAME',value.name)
      context.commit('SET_SEX',value.sex)
    }
  }
  /*context内容
  *{
  *  state,      // 等同于 `store.state`，若在模块中则为局部状态
  *  rootState,  // 等同于 `store.state`，只存在于模块中
  *  commit,     // 等同于 `store.commit`
  *  dispatch,   // 等同于 `store.dispatch`
  *  getters,    // 等同于 `store.getters`
  *  rootGetters // 等同于 `store.getters`，只存在于模块中
  *}
  */
  // ---------------modules-----------------
  import 子模块B from './XXX'
  modules:{
    子模块A名:{  // 方式1
      state,
      namespaced?,   // 是否使用命名空间
      mutations,
      actions?,
      getters?,
      modules?
    }, 
    子模块B     // 方式2
  

• mutations选项 ：转变状态

  属性：(state总是第一个参数 , payload调用时的传参)。调用时使用 commit

• actions选项 ：多个操作集合。按照规范mutations每次会调用一个函数，actions的作用是状态改变会触发多个函数执行

  属性：操作名function(contxt总是第一个参数 , payload调用时的传参)。调用时使用 dispatch

• modules选项 ：子模块集合。子模块的store对象会被合并到root 的 store 中

  属性：操作名function(contxt总是第一个参数 , payload调用时的传参)。调用时使用 dispatch

• plugins选项 ：一个数组，包含应用在 store 上的插件方法
• strict选项: boolean 默认false

  Vuex store 进入严格模式，在严格模式下，任何 mutation 处理函数以外修改 Vuex state 都会抛出错误

Vuex.Store实例属性 只读

• state
• getters这里的属性值是通过 注册getter时的函数计算得到, 子模块的key为 '子模块名/函数名'，根模块为'函数名'

Vuex.Store实例方法

• commit :提交commit 是唯一更改状态方法 dispatch 内部也是通过commit 完成

  给state添加属性：Vue.set(obj, 'newProp', 123) | state.obj = { ...state.obj, newProp: 123 }

  // ---------------commit----------------
  commit(type: 函数名string,传参payload?: any, 选项options?: Object)  // 方式一
  commit(mutation: 对象格式Object, options?: Object)  // 方式二
  store.commit('increment', {
    amount: 10  })
  store.commit({
    type: 'increment',  // 函数名
    amount: 10  })
  // ---------------dispatch----------------
  dispatch(type: string, payload?: any, options?: Object): Promise<any>
  dispatch(action: Object, options?: Object): Promise<any>
  

• dispatch：分发action 即去调用actions中的函数, 返回一个promise

组件内的辅助函数

• mapState：mapState(映射函数map:传参数组Array | 传参对象Object): 返回对象Object

//----------------mapState-------------------
computed: mapState({
  // 方式一 ： 箭头函数可使代码更简练
  count: state => state.count,  
})
computed: mapState([
  // 方式二 ：映射 this.count 为 store.state.count
  'count',state.属性A ,state.属性B
])
computed: {
  // 方式三 ：使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })

// mapState、mapGetters ： 由于映射的是属性，所以放在 computed 中
// mapActions、mapMutations ： 映射的是方法，所以放在 method 中