vuex的笔记

vuex适用于没有关联的组件之间要使用同一组数据。
action中处理异步，mutation不可以
mutation做原子操作
action可以整合多个mutation的集合
mutation 是同步更新数据(内部会进行是否为异步方式更新数据的检测) $watch 严格模式下会报错
action 异步操作，可以获取数据后调佣 mutation 提交最终数据
1、流程顺序
“相应视图—>修改State”拆分成两部分，视图触发Action，Action再触发Mutation。
2、角色定位
基于流程顺序，二者扮演不同的角色。
Mutation：专注于修改State，理论上是修改State的唯一途径。
Action：业务代码、异步请求。Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到 Modules 时，你就知道 context 对象为什么不是 store 实例本身了。

3、限制
角色不同，二者有不同的限制。
Mutation：必须同步执行。
Action：可以异步，但不能直接操作State。
state是自定义的一些变量，需要用来保存数据，mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据，参数的话，第二个参数就是用户传入的值，然后在方法中赋值给state中的变量
Mutation
Mutation：专注于修改State，理论上是修改State的唯一途径。
user.js文件

state:{
    token: getToken(),
    userName: localStorage.getItem('userName'),
    userId:  localStorage.getItem('userId'),
    role: localStorage.getItem('role'),
    userKey:localStorage.getItem('userKey')
  },
 mutations:{
    setToken(state, data){
      state.token = data;
      setToken(data)
    },
    setUserName(state, data){
      state.userName = data;
      localStorage.setItem('userName', data)
    },
    setUserId(state, data){
      state.userId = data;
      localStorage.setItem('userId', data)
    },
    setRole(state, data){
      state.role = data;
      localStorage.setItem('role', data)
    },
    setUserKey(state, data){
      state.userKey = data;
      localStorage.setItem('userKey', data || '')
    },

Action
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
store.dispatch
分发Action
Action 通过 store.dispatch 方法触发。
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。
app.js文件

const actions = {
  toggleSideBar({ commit }) {
    commit('TOGGLE_SIDEBAR')
  },
  closeSideBar({ commit }, { withoutAnimation }) {
    commit('CLOSE_SIDEBAR', withoutAnimation)
  },
  toggleDevice({ commit }, device) {
    commit('TOGGLE_DEVICE', device)
  }
}

组件中使用：

mounted() {
    const isMobile = this.$_isMobile()
    if (isMobile) {
      store.dispatch('app/toggleDevice', 'mobile')
      store.dispatch('app/closeSideBar', { withoutAnimation: true })
    }
    this.$once('hook:beforeDestroy',()=>{
      window.removeEventListener('resize', this.$_resizeHandler)
     })
  },

在组件中分发 Action
在组件中使用 this.$store.dispatch(‘xxx’) 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
例子：
company.js文件

    actions: { 
//获取员工信息
    queryStaffs({ commit }) {
      return new Promise((resolve) => {
        getCompanyEmployee().then(({ data }) => {
          commit('setStaffs', data)
          resolve(data)
        })
      })
}
}

组件中使用

  //获取员工信息
    handleQuery () {
      this.$store.dispatch('company/queryStaffs').then(res => {
        this.param = res
      })
    }