Vuex（一）

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

Vuex 安装

使用 npm 安装方式，安装命令如下：

npm install vuex 

注意如果报错npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency tree的话要使用下面这个命令，这个报错是因为 npm 版本太高：

 npm install vuex --legacy-peer-deps  

在 main.js 文件中导入 Vuex，并安装 Vuex 插件，代码如下：

import Vuex from 'vuex'Vue.use(Vuex)

import Vuex from 'vuex'是导入 vuex

Vue.use(Vuex)是安装 Vuex 插件

基本用法

Vuex 使用单一状态树，用一个对象包含了所有应用层级的状态，作为唯一数据源（single source of truth）而存在，每一个 Vuex 应用的核心就是 store，store 可理解为保存应用程序状态的容器

store 与普通的全局对象的区别有以下两点：

1. Vuex 的·状态存储是响应式的。当 Vue 组件从 store 中检索状态的时候，如果 store 中的状态发送变化，那么组件也会相应地得到高效更新

2. 不能直接改变 store 中的状态,改变 store 中的状态的唯一途径就是显式地提交 mutation，这可以确保每个状态更改都留下可跟踪的记录，从而能够启用一些工具来帮助我们更好地理解应用

创建一个 store 代码如下：

const store=new Vuex.Store({    state:{        count:0    },    mutations:{        increment (state){            state.count++        }    }})

state：{}状态数据放到 state 选项中

mutations：{}选项中第一修改状态的方法 这些方法接收 state 作为第一个参数

在组件中访问 store 中的数据可以直接使用 store.state.count

在组件中展示 store 中的状态，使用计算属性来返回 store 的状态。代码如下：

computed:{    count(){      return this.$store.state.count    }  }

之后在组件的模板中就可以直接使用 count。当 store 中的 count 发送改变时，组件内的计算属性 count 也会同步发生改变

更改 store 状态要遵照 Vuex 的要求：通过提交 mutation 来更改 store 中的状态。在严格模式下如果 store 中的状态改变不是由 mutation 函数引起的，则会抛出错误，而且如果直接修改 store 中的状态，Vue 的调试工具也无法跟踪状态的改变，在开发阶段可以启用严格模式，以避免直接的状态修改，在创建 store 的时候，传入 strict：true。代码如下：

const store = new Vuex.Store({    strict:true,    state: {        count: 0    },    mutations: {        increment(state) {            state.count++        }    }})

Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型和一个处理器函数，这个处理器函数就是实际进行状态更改的地方，他接收 state 作为第一参数，

我们不能直接调用一个 mutation 处理器函数，mutation 选项更像是事件注册，当触发一个类型为 increment 的 mutation 时，调用此函数要调用一个 mutation 处理器函数，需要用他的类型去调用 store。commit 方法，代码如下：

store.commit("increment")