vue项目中vuex的使用

一、vuex是什么？
vuex是一个用来管理组件之间通信的插件，它是一个专为【vue.js】应用程序开发的状态管理模式，它解决了组件之间同一状态的共享问题，它能够更好地在组件外部管理状态。
二、为什么需要vuex？
当多个组件依赖于同一个状态时，由于多层组件之间的嵌套使得传参数的方法变得更加复杂，另外如果使用父子组件直接饮用或者通过事件来变更和同步状态的多酚拷贝，会使得该模式变得脆弱，从而无法维护代码。
三、什么时候什么情况下使用vuex？
构建一个中大型单页应用，需要考虑到如何更好地在组件外部管理状态。
注意：如果不是开发大型单页应用，使用vuex可能是繁琐冗余的，也就是本来很快就可以开发完成的项目，用了vuex，结果却复杂了。一般简单的store模式就可以了。
四、vuex的五个核心概念？
state、getters、mutations、actions、modules
① state：存放的属性（数据变量）。
② getters：从基本数据（state）派生的数据，相当于state的计算属性。
③ mutations；同步提交更新数据的方法。必须是同步的（异步的话使用action）。每个mutations都有一个字符串的事件类型（type）和一个回调函数（hander）。
④ actions：异步提交更新数据的犯法。和mutations的功能是大致相同的，不过不同之处：actions提交的是mutations，而不是直接去修改state里面的数据变量。actions可以包含任意异步操作。
⑤ modules：vuex模块化。当应用变得复杂时，也就是中大型项目，store对象中的数据就变得非常的庞大。为了解决这个问题，vuex允许将store分割成模块（module）。每个模块拥有自己的state、mutation、action、getter、甚至是以同样的方式一直分割下去。
五、如果还不清楚vuex的作用？
如果还不清除vuex的作用，可以直接理解为：解决了非父子的两个组件。假设要访问和修改同一个属性，不通过存储localStorage和sessionStorage的方式，那么vuex就刚好解决了这个问题。

**//使用方法部分:=========================>**
创建项目的时候如果忘了勾选安装vuex，那么安装命令如下：
npm i -S vuex

如果安装了cnpm淘宝镜像，可以使用如下命令：
cnpm i -S vuex

安装成功后，src目录下会多一个store的目录，index.js就是基本的vuex结构，如下图：

代码：
import Vue from “vue”;
import Vuex from “vuex”;

Vue.use(Vuex);

export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
});

一、中小型应用使用场景。
假设有两个组件，他们之间的关系不存在父子关系，但都要访问和修改一个属性值“currentIndex”，也就是菜单选中项，那么就先在store目录下的index.js定义结构，添加一个属性和修改这个属性的方法，如下：
state:{
currentIndex:0
}

给state添加属性，组件获取到的所有值，都是拿这里的。
mutations:{
setCurrentIndex(state,index){
state.currentIndex=index;
}
}

然后就是修改属性“currentIndex”数据的方法“setCurrentIndex”。
state：state对象，通过他可以访问也可以修改属性，在外部调用mutations下所有方法的时候不需要传这个参数的。
index：调用时传过来的数据（值）。
结构定好了，那么在外部的使用方法如下：
a.第一种使用方法。
1.访问属性通过“$store”获取：this.$store.currentIndex

如果在html标签中，可以省略this：

{{$store.currentIndex}}

2.修改属性通过调用“$store”的“commit”方法：
$store.commit(方法名,属性);
第一个参数：填写mutations中修改state属性的方法名。
第二个参数：传递过去的参数。如果需要传递多个参数，那么只能将多个参数组合成对象传递过去。
代码1：

当需要传递多个参数时，代码附上：
调用：
this.$store.commit(‘setCurrentIndex’,{
num1,
num2,
…
);

mutations：
mutations:{
setCurrentIndex(state,obj){
const {num1,num2,…}=obj; //解构赋值的方式，const变量num1会取obj中的属性num1的值，以此类推。
state.num1=num1;
state.num2=num2;
}
}

解构赋值语法是一种JavaScript表达式，es6支持。通过解构赋值，可以将属性/值或对象/数组中取出，并赋值给其他变量。
b.第二种使用方法。
导入vuex：
import {mapState,mapMutations} from ‘vuex’;

并在计算属性computed和方法methods中添加代码，结构如下：

{{currentIndex}}

//这里是可以直接拿到vuex中state里面的属性。

computed:{
…mapState([‘currentIndex’]) //扩展运算符方式
}
methods:{
//设置菜单选中项
setIndex(index){
this.setCurrentIndex(index); //在这里可以直接调用vuex中mutations的方法“setCurrentIndex”，并只需要传递第二个参数。
}，
…mapMutations([‘setCurrentIndex’])//扩展运算符方式
}

二、中大型应用使用场景。
待定。