Vuex常用知识点记录

一、为什么要使用Vuex

1、多个组件依赖同一个状态，使用组件之间通信方法会非常繁琐，例如多层嵌套组件。

2、需要全局保存的数据，例如用户、权限信息，全局系统设置

二、Vuex的五个核心属性

1、state：存储状态

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  }
});
// 组件里获取count值
$store.state.count

2、getters：state作为第一个参数，其他getters作第二个参数，返回值会根据他的依赖缓存起来，相当于Vue的计算属性

// store.js
const store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }
});
// 其他组件获取getter
$store.getters.getCountAndSum

3、mutations：修改状态（同步的），state 作为第一个参数，提交载荷作为第二个参数

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }
});
// 其他组件调用mutations的方法
$store.commit('increment', {n: 100});

4、actions：异步操作（执行mutations的方法，不是直变更状态）

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }
});
// 其他组件调用actions的方法
$store.dispatch('increment');

5、modules：store的子模块

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }
};
const b = {};
const store = new Vuex.Store({
  modules: {
     a,
     b
  }
});
// 其他组件调用 （获取state的变量需要加上引入的module的别名)
$store.state.a
$store.state.b

三、Vuex辅助函数