VueX 的使用，小白一定要看！ - 好文

今天主要解决：

1. 什么是vuex？
2. 为什么要用到vuex？
3. 怎么用？

文字比较多，不要嫌繁琐，跟这练习一遍就会了，博主可是一个字一个字写上的。

我们都知道，在做项目时，页面与页面之间要用到传值和通信，都清楚父子通信，兄弟间通信等等。。。
但是有复杂的项目，可能会嵌套很多层，这样一层一层的传值，很麻烦！不光是对代码质量造成了影响，也对代码运行的性能造成了影响，甚至会造成难以排查的bug。

之前给几个小白同学讲个例子：
小朋友想要零花钱，会先和妈妈要，妈妈没有，就去和爸爸要，爸爸把零花钱给了妈妈，妈妈再给了小朋友。
这个就很麻烦了，解决办法，不如直接爸爸把零花钱放在一个指定的位置，谁要，谁就去那个位置拿，这样就方便多了。

所以，vuex就是那个指定的地方，官方给起了个很专业的名字，叫：状态管理模式
，说白了，就是一个统一存放状态的地方，谁用里边的值都可以取到，无论页面的层次多深，不用担心拿不到的问题，这样解决复杂通信或传值的问题就很方便了。

用到的地方也有很多：比如页面切换后再回来，依然显示上次搜索条件的结果，或n个组件同时共享一个状态等等……

这些理解了，前两个问题【什么是vuex/为什么要用到vuex】自然就迎刃而解了，接下来讲一下vuex的实现原理，我们先来附上一张第一眼难以理解的官方图片

相信很多小白看完这张图片后根本不理解，没关系，我举例说一下：

比如有一个A页面显示了“100”这个数字，并且我可以随意更改，但是需求上，其他BCD三个页面也要显示同样的数字，这个字段改成什么，就显示什么，要求就是要显示的数字一模一样。

那么我就要有个地方，来放这个数据，我们先创建一个js文件，在里边定义一个对象，起名叫state，这个state专门定义这个数据的
const state={ name : 100 }

然后所有页面都可以显示出这个name，显示后还要有一个可以改的地方，我们同样，在这个js文件中，在定义一个可以写方法的对象叫mutations，它里边专门放方法，如下：
const mutations ={ addNumber(){ state.name+=100 }, miunNumber(){
state.name-=100 } }
文件中我写了一个方法叫addNmuber，这个名字随便起，我每次调用这个方法，就可以增加100，这样就实现了所有页面显示的数字，都会增加。

这个mutations中所写的方法，vue要求必须要是同步的，所以这里都写同步的方法，比如加100，或减100，或变颜色等需求都属于同步方法。这样也就是mutations控制了state中某个值的改变。

回到官网图，看下图中上边还有一个actions，actions和mutations是一样的写法，区别在于，actions中要写异步的方法，比如要调用某个异步接口，可以写在这个当中，比如高德地图和百度地图的接口，就是异步请求，页面中要引入一个地图组件，很多页面都公用，就可以写在这个当中。

那么这个异步方法actions有什么用？如果有需求，说必须等待这个接口成功返回一个数值后，再改变state中的值，这时就需要actions中调用一个接口，接口返回后，调用mutations中的方法，来改变state中的值。
const actions = { actionsAddNumber(context){ this.axios.get('/接口名').then(()=>{
context.commit('addNumber') }) }, }

actionsAddNumber名字随便起，它接收一个context参数。其中调用了异步方法，成功用，利用commit触发了mutations中的addNumber方法。
实战当中，我们可以利用ES5的结构赋值，改变一下代码，直接提取context参数中的commit使用，如下：
const actions = { // 结构赋值提取commit actionsAddNumber({commit}){
this.axios.get('/接口名').then(()=>{ // 直接使用commit commit('addNumber') }) }, }
那么在vue页面使用store.dispatch触发action中的方法：
this.$store.dispatch('actionsAddNumber')

不过注意的是，非大型项目actions并不是必须要用到的，一般state和mutations已足够我们使用。官网也建议，非必须情况下，不建议使用vuex，因为我们需要下载，还要引入，在文件大小和加载上，都是会受到影响的。

回过头来看官网的图片，或许，你就理解了，若面试问到，说一下vuex的实现原理，就按照这个理解，按照官网的图说：
页面中的组件，通过dispatch，来调用actions方法异步加载，成功后，通过commit触发mutations中的某个方法，来改变state中的某个值
，这就是原理，最好再加上自己的理解说出来。

接下来说下vuex的用法：

创建项目时，vuex不会自带，因为不是每个项目都需要vuex，所以我们需要下载
npm install vuex --save
创建一个store文件夹，这个名字自己随意起，规范一些起个store

文件夹中放入一个js文件，例如：store.js。

文件中引入vuex，并创建出state、mutations即可（getters本文暂时不讲）。
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) // 定义数据 //
state在vuex中是用于储存数据的 const state={ name : 100 } // 定义方法 mutation同步 // mutations
里面方的是方法，主要用于改变state中的数据源 const mutations ={ addNumber(){ state.name+=100 }, }
// 实例化 Vuex.store,用到什么引什么，用到actions就引入actions，用到getters就引入getters，本文只用到这两个
const store = new Vuex.Store({ state, mutations }) export default store;
搞定，vuex建立完成，就这么简单的一个vuex文件写完了，接下来vue页面文件中该使用这个了

首先我们需要找到目录中main.js中引入vuex，把文件目录引入，main.js是什么，不懂的小白要去查查。
import Vue from 'vue' import router from './router' import store from
'./store/store' new Vue({ el: '#app', router, // 这个要使用 store, // 这个也要使用
components: { App }, template: '<App/>' })

使用很简单，因为我们在上边的store中实力化了这几个方法（看上边注释），所以我们就需要用this.$store来进入这个文件中，那么我想在页面中显示state中的数字100，如下写法：
<div>{{this.$store.state.name}}</div>
任何一个页面都可以这样引用，引入一个，显示一个。改变值的方法如下：
<button @click="add">增加100</button> methods:{ add(){
this.$store.commit('addNumber') }, }
点击按钮，就会增加数字了，并且改变一个，所有页面上的这个属性，也会跟着改变，多加练习和理解。

当然，我们可以向mutations中，传入数值：
mutations: { // 两个参数，一个是state，一个是参数n（也叫payload载荷） addNumber(state, n) {
state.name+= n } } this.$store.commit('addNumber', 100)
这样就是非固定的写法，可以传入你想要的参数值。

avillin笔记：

1. 能改变state的方法是mutations。
2. 页面中用this.$store.state来获取到state中的某个值。
3. 页面中使用this.$store.commit来调用vuex中mutations里的某个方法。
4. 页面中使用this.$store.dispatch来调用vuex中actions里的某个方法。

热门工具换一换