Vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

vuex安装

npm i vuex -s

安装后 在项目的根目录下会新增一个store文件夹，在该文件夹内创建了index.js

此时你的项目的src文件夹应当是这样的

│ App.vue │ main.js │ ├─assets │ logo.png │ ├─components │ HelloWorld.vue │ ├─router │ index.js │ └─store index.js

将store挂载到当前项目的Vue实例当中去：

main.js:

import Vue from 'vue' import App from './App' import router from './router' import store from './store' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中 render: h => h(App) })

在组件中使用Vuex

this. $store.state

Vuex成员列表

state 存放状态

mutations state成员操作getters 加工state成员给外界actions 异步操作modules 模块化状态管理

State

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT)”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。

单状态树和模块化并不冲突——在后面的章节里我们会讨论如何将状态和状态变更事件分布到各个子模块中。

存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则 。可以参考： https://cn.vuejs.org/v2/api/#data

对象展开运算符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符，我们可以极大地简化写法：

computed: { localComputed () { /* ... */ }, // 使用对象展开运算符将此对象混入到外部对象中 ...mapState({ }) }

Actions

由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

Actions中的方法有两个默认参数

context 上下文(相当于箭头函数中的this)对象payload 挂载参数

组件中，我们需要这样调用这个Actions

this.$store.dispatch('method',data)

Mutations

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。

mutations方法都有默认的形参：(state，data)

state是当前VueX对象中的statedata是该方法在被调用时传递参数使用的

组件中，我们需要这样调用这个mutation

this.$store.commit('method')

Getters

可以对state中的成员加工后传递给外界

Getters中的方法有两个默认参数

state 当前VueX对象中的状态对象getters 当前getters对象，用于将getters下的其他getter拿来用

组件中，我们需要这样调用这个Getters

this.$store.getters.method

Models

当项目庞大，状态非常多时，多人协作完成项目时，可以采用模块化管理模式。

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

models:{ a:{ state:{}, getters:{}, .... } }

组件中，我们需要这样调用这个Models

this.$store.state.a