Vuex学习笔记

---

State

• state的改变不能直接改变，需要由mutation统一提交
• 组件内部获取state的值，通过计算属性computed来获取
• 可在根组件注入，这样就不用在每个需要用到vuex的组件内引入了
• 在根组件注入，可以由this取到state的值–>this.$store.xxx, 而若是使用全局状态 --> store.state.xxx 来获取state

mapState

• mapState函数返回的是一个对象，用扩展运算符能简便完成所有的映射，再加上如果state和组件中起映射的名字一样，可以只写上名字+","

...mapState([
            'list',
            'app'
       ]),

---

Getter

• getter相当于是vuex中的计算属性，当多个组件都要对state进行同一个操作的时候，在各个组件的计算属性里都写同个操作明显浪费资源，这个时候把这个操作放在vuex里统一进行就是getter
• getter语法, 传入参数中第一个state是默认必须有的，第二第三个参数可选

etters: {
    doneTodos:（state, a, b） => {
      return state.todos.filter(todo => todo.done)
    }
  }

• Getter 会暴露为 store.getters 对象，可以以属性的形式访问这些值
• 组件内调用getter的方法和state一致，也可以通过方法的方式访问

getters: {
  // ...
  getTodoById: (state) => (id) => {
    return state.todos.find(todo => todo.id === id)
  }
}

store.getters.getTodoById(2)

我经常搞错的地方

• state和getter在vuex有自己的名字，computed里可以取另外的名字，如下所示

//vuex中getter的里函数名叫add10
const store = new Vuex.Store({
  state: {
  	a：1
  },
  getters: {
    add5: state => {
      return state.a + 5
    }
  }
})

//组件内通过computed来获取getter，但是取了一个新的名字叫addAnother10
computed: {
  addAnther10 () {
    return this.$store.getters.add10
  }
}

mapGetter

---

Mutation

• Mutation内必须为同步函数 why: 例如devtools，捕捉到的是前一状态和后一状态的快照，而此时异步操作例如，回调函数还没执行，也就跟踪不了状态的改变了
• playload载和其实就是除了mutation默认的store参数外的参数
• mutation提交方式

1. 组件提交mutation要用store.commit(‘mutation内函数名’)
2. 使用包含 type 属性的对象

store.commit({
  type: 'increment',
  amount: 10 //载荷
})

3. 在组件中的method中使用mapMutation提交

methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

---

Action

• Action内可以由任意异步操作
• action要通过commit提交到mutation里，而不是直接改变state

actions: {
    increment (context) {
      context.commit('increment') //commit提交到mutation
    }
  }

• Action语法，context是一个对象，有和store相同的属性和方法，所以可以通过context调用store里面的state和getter，经常用到 ES2015 的 参数解构 来简化代码

actions: {
  increment ({ commit }) {
    commit('increment') 
    //这里就可以直接使用commit（‘xxx‘）了，而不是还要store.commit('xxx')
    //作用仅此而已......
  }
}

• action通过store.dispatch（‘xxx‘）触发，其他触发方式和mutation一致（type方法和mapAction方法）
• store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}

//组件内可以这样使用，调用dispatch后用then来接受data
store.dispatch('actionA').then(() => {
  // ...
})

• 使用async/await

actions: {
  async actionA ({ commit }) {
    commit('gotData', await getData())//这里playload是一个回调函数
  },
  async actionB ({ dispatch, commit }) {
    await dispatch('actionA') 
    //action里面再次嵌套一个action 
    //并且用await 等待 actionA 完成
    commit('gotOtherData', await getOtherData())
  }
}

---

Module