vuex知识的简单梳理

一、什么是vuex?
vuex是状态管理。状态是用来反映项目整体特征的量，例如项目当前的登录用户信息、用户角色信息、项目中需要用到的公共信息等。这些特征量是通过变量的形式来体现的，因此我们也将状态成为“状态量”。
状态量最大的特点就是可以在所有的单组件文件（.vue格式文件）中进行访问。

二、vuex的组成部分

1. state 数据源
2. mutiations 同步操作数据源
3. getters 数据源的计算属性
4. actions 异步操作数据源
5. modules 模块化

三、在PC端项目中部署vuex

1. 安装vuex
   npm install vuex --save-dev

2. 创建文件夹和文件
   a、在项目根目录\src\文件夹下创建vuex文件夹。
   b、在vuex文件夹下创建组成vuex的index.js文件。
   c、在vuex文件夹下分别创建vuex各个组成部分的js文件。
   如下图：
   

3. vuex的配置：在src\vuex\index.js文件中，配置内容为：

   import Vue from 'vue';
   import Vuex from 'vuex';
   Vue.use(Vuex);
   
   import state from './state';
   import mutations from './mutations';
   import getters from './getters';
   import actions from './actions';
   
   let store=new Vuex.Store({
     state,
     mutations,
     getters,
     actions
   });
   
   export default store;
   

4. 在webpack入口文件src\main.js文件中导入状态管理文件

   import store from './vuex/index';
   new Vue({
     ...
     store,
     ...
   });
   

四、vuex各个组成部分的功能

1. vuex中的数据
   state：vuex中的数据源，用来存储项目中用到的状态量，并为状态量赋初值。
   getters：以状态量为依赖变量的计算属性。
2. vuex中的操作
   mutations：对数据源state进行操作的方法。
   actions：用于调用mutations操作的方法。

五、vuex各个组成部分的直接访问

1. 访问state数据源

   this.$store.state.数据源名
   

2. 访问getters数据源的计算属性

   this.$store.getters.数据源名
   

3. 访问mutations操作
   a、载荷分发：

   this.$store.commit('方法名'实参,)
   

   b、对象分发：

   this.$store.commit({
   	type:方法名,
   	参数名1:参数值1,
   	参数名2:参数值2
   })
   

4. 访问actions操作
   a、载荷分发：

   this.$store.dispatch('方法名'实参,)
   

   b、对象分发：

   this.$store.dispatch({
   	type:方法名,
   	参数名1:参数值1,
   	参数名2:参数值2
   })
   

六、vuex各个组成部分的解构访问

1. 在单组件文件的script标记对中引入vuex的各个组成部分

   import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
   

2. 在计算属性中解构state、getters

   computed:{
   	...mapState(['数据源名1','数据源名2']),
   	...mapGetters(['计算属性名1','计算属性名2'])
   }
   

3. 在方法去解构mutations、actions

   methods:{
   	...mapMutations(['方法名1','方法名2']),
   	...mapActions(['方法名1','方法名2'])
   }