Vuex store

Vuex


一个 store 有四个属性：state， getters, mutations, actions。



State
state 上存放的，说的简单一些就是变量，也就是所谓的状态。就是放一些变量

const store = new Vuex.Store({
    state: {
        count:0
    },
    mutations: {
        // 加1
        increment(state) {
            state.count++;
        },
        // 减1
        decrement(state) {
            state.count--
        }
    }
})

Getters
Getter 接受 state 作为其第一个参数：
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)
    }
  }
})


computed: {
  doneTodosCount () {
    return this.$store.getters.doneTodosCount
  }
}

getters就是可以对数据进行了处理后的一个缓存，State更新它才会重新计算

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。




Mutation定义更改State的变量值

 const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment (state) {
      // 变更状态
      state.count++
    }
  }
})

store.commit('increment') //触发increment进行State的变量值的改变

视图触发Action，Action再触发Mutation。
Mutation：必须同步执行。

Action：可以异步，但不能直接操作State。

Action 提交的是 mutation，而不是直接变更状态


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