vuex状态管理：vuex

什么是vuex？

vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
这是vuex官网的解释。我们把它理解为在data中的属性需要共享给其他vue组件使用的部分，即data中需要共用的属性。

vuex的核心概念

1. this.$store：我们可以通过this.$store在vue的组件中获取vuex的实例。

2. State：vuex中的数据源，我们可以通过this.$store.state获取我们在vuex中声明的全局变量的值。

3. Getter：相当于vue中的computed，及计算属性，可以用于监听、计算 state中的值的变化。

4. Mutation：vuex中去操作数据的方法（只能同步执行）。

5. Action：用来操作Mutation 的动作，他不能直接去操作数据源，但可以把mutation变为异步的。

6. Module：模块化，当应用足够大的时候，可以把vuex分成多个子模块。

上手vuex

用vue-cli构建一个项目，用命令npm install vuex --save来安装vuex

在src文件夹下新建一个vuex文件夹，并在文件夹下新建store.js文件

配置main.js

import App from './App'
import router from './router'
import vuex from 'vuex'

Vue.use(vuex)
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
})

配置store.js

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

export default new vuex.Store({
    state
})

在components新建一个count.vue组件，先引入，再注册，最后调用

<template>
  <div>
    {{$store.state.count}}  <!-- 调用 -->
  </div>
</template>

<script>
import store from '@/vuex/store'  //引入
export default {
  store  //注册
}
</script>

<style>
</style>

在定义两个方法来改变state中的值

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state){  //此处的state是上面的state对象
        state.count++
    },
    reduce(state) {
        state.count--
    }
}

//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations
})

在组件中调用mutations的方法，要以commit的方式调用

<template>
  <div>
    {{$store.state.count}}
    <div>
      <button @click="$store.commit('add')">+</button>  
      <button @click="$store.commit('reduce')">-</button>  
    </div>
  </div>
</template>

<script>
import store from '@/vuex/store'
export default {
  store
}
</script>

<style>
</style>

从图中可以看到，已经实现了对vuex中的count加减操作

访问state的三种方式

把stroe.js中的值，赋值给我们模板里data中的值，有三种赋值方式：

1. 通过computed的计算属性直接赋值

computed属性可以在输出前，对data中的值进行改变，我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

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

同时将模板中的$store.state.count改为count，效果不变

2. 通过mapState的对象来赋值

先引入mapState

import {mapState} from 'vuex'

再修改成如下代码：

computed:mapState({
  count(state){
    return state.count
  }
})

3. 通过mapState的数组来赋值

computed:mapState(['count'])

这是最简单的写法，也是开发中最常用的方法

Mutations
接下来修改一下mutations中的add方法，给它加个参数

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

在模板中相应修改：

<div>
  <button @click="$store.commit('add',10)">+</button>  
  <button @click="$store.commit('reduce')">-</button>  
</div>

类似之前的state的属性的调用，mutations的方法调用也很麻烦，没有人会喜欢用$store.commit()去调用方法
模板获取Mutations方法
先引入mapMutations

import {mapState,mapMutations} from 'vuex'

在methods中加入mapMutations的方法

methods:mapMutations(['add','reduce'])

最后修改模板，就跟平时的调用方法一样了

<div>
  <button @click="add(10)">+</button>  
  <button @click="reduce">-</button>  
</div>

getters计算过滤操作
对count进行计算属性的操作，让它输出前先加上100

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

const getters={
    count(state){
        return state.count+=100
    }
}

//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations,
    getters
})

state和getters都是通过computed属性输出的，所以当getters的介入会覆盖掉state，所以使用es6的扩展运算符…

computed:{
    ...mapState(['count']),
    count(){
        return this.$store.getters.count
    }
}

测试一下会发现每次都是+110，是因为点击一下，先通过getters计算得到新的state（此时已经+100） 然后由mutation改变+10
用mapGetters简化模板写法
先引入mapGetters

import {mapState,mapMutations,mapGetters} from 'vuex'

修改成如下代码：

computed:{
    ...mapState(['count']),
    ...mapGetters(['count'])
}

Actions异步修改状态
actions和之前讲的mutations功能基本一样，不同点是，actions是异步的改变state状态，而mutations是同步改变状态。

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state={
    count:1
}

const mutations={
    add(state,x){
        state.count+=x
    },
    reduce(state) {
        state.count--
    }
}

const getters={
    count(state){
        return state.count+=100
    }
}

const actions={
    actions_add(context){
        context.commit('add',10)
    },
    actions_reduce({commit}){
        commit('reduce')
    }
}
//用export default 暴露，让外部可以使用
export default new vuex.Store({ 
    state,
    mutations,
    getters,
    actions
})

两个方法的传参不同：

ontext：上下文对象，即store本身
{commit}：直接把commit对象传递过来，更加清晰
模板使用Actions方法
引入mapActions

import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'

在methods中写入：

methods:{
    ...mapMutations(['add','reduce']),
    ...mapActions(['actions_add','actions_reduce'])
}

最后在模板中调用方法

<div>
  <button @click="actions_add(10)">+</button>  
  <button @click="actions_reduce">-</button>  
</div>

Module模块组
随着项目的复杂性增加，共享的状态越来越多，此时就需要对状态进行分组，分组后再进行按组编写，实现状态管理器的模块组操作。

新增两个文件夹，并且都新增一个store.js

在test1/store.js中写入

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state = {
  name: 'test1'
}

export default new vuex.Store({
  state
})

复制test2/store.js中，修改name为test2

import Vue from 'vue'
import vuex from 'vuex'

Vue.use(vuex)

const state = {
  name: 'test2'
}

export default new vuex.Store({
  state
})

在根目录的store.js中引入这两个模块

import Vue from 'vue'
import vuex from 'vuex'
import modules1 from './test1/store'
import modules2 from './test2/store'
Vue.use(vuex)

export default new vuex.Store({
  modules: {
    modules1,
    modules2
  }
})

最后在模板中使用

<template>
  <div>
        {{name1}}
        {{name2}}
  </div>
</template>

<script>
import store from '@/vuex/store'
import {mapState} from 'vuex'
export default {
    store,
    computed:{
        ...mapState({
            name1:({modules1})=>modules1.name,
            name2:({modules2})=>modules2.name,
        }),
    }
}
</script>

<style>
</style>