Vuex学习总结

// mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

import Vuex from 'vuex'
import { SOME_MUTATION } from './mutation-types'


const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    //接受其他getter作为参数
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length
    }
  },
  mutations: {
    [SOME_MUTATION] (state, payload) {
       state.count += payload.amount
    }
  },
  //Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象
  actions: {
    increment (context,payload) {
      context.commit('increment')
    },
    increment ({ commit },payload) {
      commit('increment')
    },
    async actionA ({ commit }) {
      commit('gotData', await getData())
    }
  }
})

Vuex解决的问题

1.多个视图依赖于同一状态。

2.来自不同视图的行为需要变更同一状态。

核心概念：

1.State

import { mapState } from 'vuex'

computed: {
    count () {
      return this.$store.state.count
    },
    //相当于
    ...mapState(['count'])
  }

2.Getter（可以认为是 store 的计算属性）

import { mapGetters } from 'vuex'

computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  },
   ...mapGetters(['doneTodosCount']),
   ...mapGetters({
          doneCount: 'doneTodosCount'
   })
}

3.Mutation  (更改 Vuex 的 store 中的状态,必须是同步函数)

import { mapMutations } from 'vuex'

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

      // `mapMutations` 也支持载荷：
      'incrementBy' 
      // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' 
      // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }

4.Action (提交的是 mutation，而不是直接变更状态)

import { mapActions } from 'vuex'

export default {
  
  methods: {
    ...mapActions([
      'increment', 
     // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`

      'incrementBy'
     // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),
    ...mapActions({
      add: 'increment'
     // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })
  }
}

5.Module(略，暂时用不到)

详细的请去官方文档查看https://vuex.vuejs.org/zh/guide/plugins.html