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")

作者：xiao_kai

链接：https://juejin.cn/post/7112403250837471263

来源：稀土掘金

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。