Vue复习（6）：Vue的状态管理vuex（1）

---

前言

vuex是Vue管理状态的一种工具，就像我们react里面的redux一样，当时我们学习redux时是使用它创建一个store，存储我们的状态，那么，vue又是怎么借助vuex管理状态的呢/

一、下载vuex

终端输入：（我们使用3.5.1版本的vuex，因为过个年，vuex也更新了…）

 npm i vuex@3.5.1 --save

二、基本框架

在你的src文件夹下，创建一个store文件夹（就像我们的react项目一样）,store文件夹下创建我们的index.js文件,在里面创建store,代码如下：

import Vuex from 'vuex';
import Vue from 'vue';

Vue.use(Vuex)

const store=new Vuex.Store({
    state:{
        count:0
    }
})

export default store

然后再main.js文件下引入，和router引入方法一样：“

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

然后你的Vue视图部分（App,vue)就可以使用其中的参数进行渲染了：

最后结果显示：

三、getters

和之前学过的computed属性相似
代码如下，注意，这里一定要传递一个参数state：

调用：

结果显示：

四、mutations改变状态

mutations是vue用来改变状态的方式，上面的getters只是返回一个新的值而不改变state中的状态。mutations相关使用如下（注意这里的amutations和getters一样，内部函数默认传入参数state)：

然后我们在App.vue中使用add函数的时候，要调用

this.$store.commit(‘add’)

具体代码如下：

<template>
  <div id="app">
    {{$store.state.count}}
    {{$store.getters.change}}
    <button @click="addCount">Add</button>
  </div>
</template>

<script>

export default {
  name: 'App',
  methods:{
    addCount(){
      this.$store.commit("add")
    }
  }
}
</script>

最后点击加一结果显示：

五、actions存储逻辑

我们react里面也有一个action，里面存储的是我们改变状态的逻辑。这里的actions作用也差不多，里面会调用上一个板块学到的commit方法。其内部函数默认传一个context参数，这个参数会调用commit方法，将我们mutations里面定义的改变状态的方法传递给我们视图部分使用传递时我们就不哟用在methods里面调用commit方法了，而是使用dispatch，具体代码如下：
首先定义我们要使用的actions：

App.vue文件调用如下：

六、modules模块

与react的模块化相似，内部可以定义多个模块，代码如下（每一个模块就和我们之前定义过的一样，都有对应的state和相关方法等。）
App.vue调用（根据打印的this.$store的结果我们可以找到两个模块的位置，然后对其相应打印）：

最后控制台输出：

（模块就相当于真很多个子节点，我们可以打印根节点观察其位置并进行调用，所以不用死记硬背）