Vuex概念及作用解释

一、Vuex是什么？

vuex是一个专门为vue.js应用程序开发的状态管理模式。

简单来说，可以把vuex看成把需要多个组件共享的变量全部储存在一个对象里面，然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。（响应式真好！）

二、Vuex管理什么状态呢？（使用）

多个状态，在多个页面间的共享问题比如用户的登录状态、用户名称、头像、地理位置等等比如商品收藏、购物车中的物品等等

这些状态信息，我们可以统一放在一个地方，对它进行保存和管理，而且他们还是响应式的。

注：在创建vuecil时若没有勾选vuex，后面要使用时需要安装

npm install vuex --save

三、vuex的使用

1、目录结构

在src文件夹下新创建一个名为store的文件夹**（vuecli4会自动生成）**，在里面新创建一个名为index.js的文件，index.js的内容如下：

2、代码

import Vue from 'vue' import Vuex from 'vuex' //1、安装插件 Vue.use(Vuex) //2、创建对象,里面会放一下固定的对象 const store = new Vuex.Store({ state:{ counter:1000 },//这是挂载属性的 mutations:{ }, actions:{ }, getters:{ }, modules:{ } }) //3、导出store对象 export default store

别忘了还要在main.js里面去挂载（导入）这个store

import Vue from 'vue' import APP from './App' import store from './store' //在这里 Vue.config.productionTip = false Vue.prototype.$store = store //这样就可以在全局使用啦 new Vue({ el:'#app', store, //记得在这里挂载哦 render:h =>h(App) })

如果想要在hhhh.vue这个组件里使用Vuex里store里的counter，可以这样使用：

<h3> {{$store.state.counter}} </h3> //这样就使用成功啦！！！

四、多界面状态管理

Vue已经帮我们做好了单个页面的状态管理，但是多个界面呢？

多个试图都依赖同一个状态（一个状态改了，多个界面需要进行更新）不同界面的Actions都想修改同一个状态（home.vue和hh.vue都需要修改这个状态）

也就是说对于某些状态（1、2、3）来说只属于我们某一个试图，但是也有些状态（a，b）属于多个试图共同想要维护的。vuex就是为我们提供这个做法的工具

全局单例模式（管理者）

我们现在要做的就是将共享的状态抽取出来，交给我们的大管家，统一进行管理。然后，每个试图，按照我规定好的规定，进行访问和修改等操作。这就是Vuex背后的基本思想。