vue的全家桶

Vuex数据管理

Vuex 是一个专为 Vue.js 应用开发的状态管理模式，集中式存储管理应用所有组件的状态。

整合vuex

vue add vuex

核心概念

state 状态、数据mutations 更改状态的函数actions 异步操作

store 包含以上概念的容器

状态和状态变更

state保存数据状态，mutations用于修改状态，store.js

export default new Vuex.Store({

  state: { count:0 },

  mutations: {

    increment(state) {
      state.count += 1;

}}

})

派生状态 - getters从state派生出新状态，类似计算属性

export default new Vuex.Store({
  getters: {

left(state) { // 计算剩余数量return 10 - state.count;

}}

})

动作 - actions添加业务逻辑，类似于controller

export default new Vuex.Store({
  actions: {

asyncIncrement({ getters, commit }) {

// 异步逻辑返回Promise

return new Promise((resolve, reject) => {

setTimeout(() => {

// 添加业务逻辑

if (getters.left > 0) {

            commit("increment");
            resolve();
            return;

}

          reject();
        }, 1000);

});},

}})