# Vue2教程 - 16 Vuex
Vuex 是 Vue 配套的公共数据管理工具，它可以把一些组件共享的数据，保存到 Vuex 中，方便整个程序中的任何组件直接获取或修改这些公共数据。
之前学了父子组件之间传递数据，通过属性及回调函数的形式来传递。但是如果涉及到多级组件嵌套，各个组件之间传递数据会非常麻烦。尤其是遇到没有父子关系的组件，在其间传递数据会更麻烦。
Vuex 就是为了保存组件之间的共享数据，如果组件之间有要共享的数据，可以把数据保存到 Vuex 中，Vuex就是提供一个全局的共享数据存储区域，相当于一个数据仓库，各个组件都可以从中读取数据。
# 16.1 安装Vuex
# 1 安装vuex
# npm方式安装
npm install vuex@3 --save
# yarn方式安装
yarn add vuex@3
2
3
4
5
Vue2 中只能使用 vuex3版本。
# 2 创建数据存储对象
如果在一开始新建项目的时候，就勾选了Vuex，那么会在项目的 src 下创建一个 store 目录，并包含了一个 index.js文件。
所以如果你创建项目的时候，没有勾选，那么我们也按照这样的方式来操作。首先在 src 下创建一个 store 目录，然后在其下创建一个 index.js文件，内容如下：
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules: {},
});
2
3
4
5
6
7
8
9
10
11
12
在上面的代码中，是时候用Vuex创建了一个数据存储对象，在其中有一些属性选项，这个后面再解释。
其中：
state属性是用来存储的公共数据；mutations属性是用来操作state中的数据的方法，只能通过mutations中提供的方法来操作state中的数据；
# 3 挂载数据存储对象
在项目的 main.js 中引入 Vuex 的数据存储对象，并挂载到Vue实例上。
import Vue from 'vue'
import App from './App.vue'
// 引入路由
import router from "./router";
// 1.引入Vuex
import store from "./store";
Vue.config.productionTip = false
new Vue({
router,
store, // 2.挂载
render: h => h(App),
}).$mount('#app')
2
3
4
5
6
7
8
9
10
11
12
13
14
我们已经将 store 挂载到了 Vue 实例上，那么任何组件对象都可以通过 $store.state.属性 的方式获取到属性的值。
修改 store 中的数据千万不要这么用 this.$store.state.属性=值 的方式来修改，不符合 Vuex 的设计理念。因为直接操作 state 中的数据，因为万一导致了数据的紊乱，不能快速定位到错误的原因，因为每个组件都可能有操作数据；所以如果要操作 store 中的 state 值，只能通过调用 mutations 提供的方法，才能操作对应的数据。
下面演示一下 Vuex 的使用。