Vuex状态管理

1 Vuex简介

1.1 什么是Vuex

Vuex是一个专为Vue.js应用程序开发的状态管理工具。它采用了集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
简单来说，Vuex是一个适用于在Vue项目开发时使用的状态管理工具，如果在一个项目开发过程中频繁的使用组件传参的方式来实现数据的同步，那在项目的扩展、管理和维护方面将是一个灾难。为此，Vue为这些被多个组件频繁使用的数据提供了一个统一管理的工具，即Vuex。

在具有Vuex的Vue项目中，我们只需要把这些值定义在Vuex的状态管理对象中，就可以在整个项目的组件内被使用。

1.2 Vuex安装与使用

在使用vue-cli脚手架工具创建项目的过程中，可以手动选择安装Vuex，也可以在项目创建完成后再独立安装。
使用NPM安装Vuex命令如下：

npm i vuex --save

使用yarn安装Vuex命令如下：

yarn add vuex

在一个模块化的打包系统中，您必须显式地通过 Vue.use() 来注册 Vuex。
/src/store/index.js 文件代码如下：

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

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        name:'helloVueX'
    }
})

export default store

将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。例如在App.vue中，我们要将state中定义的name拿来在h1标签中显示。
/App.vue 文件代码如下：

<template>
    <div id='app'>
        name:
        <h1>{{ $store.state.name }}</h1>
    </div>
</template>

或者要在组件方法中使用。代码如下：

//...
methods:{
    add(){
      console.log(this.$store.state.name)
    }
},
//...

2 Vuex核心概念

2.1 Vuex的工作流程

在Vuex对象中定义了五个成员来管理对象内的数据，其中state是用来存放数据的，剩下的成员都是用来操作state中数据的方法集。Vuex对象的成员有以下五个。

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

Vuex的具体工作流程如下图所示。

在Vuex的整个工作流程中，会发现actions和mutations都是对state中的数据进行操作的方法集，但是它们被应用在不同的场景下。例如，Vue中的组件如果在调用Vuex的某个方法时，需要向服务器发送请求或者是需要进行其他的异步操作，这时就需要使用 $store.dispatch() 将数据派发的 actions 的对应方法中，以此来保证数据的同步。actions 中方法的作用就是为了让 mutations 中的方法能在异步操作中起作用。
如果在操作state数据的过程中没有异步的行为，那么就可以直接使用 $store.commit() 将数据提交到mutations中的方法，然后在方法中对数据进行操作。更新后的state数据会被渲染到组件中。

2.2 Vuex对象核心成员

在Vuex对象中一共有以下五个核心成员。

State

state的用法非常简单，就是用来存放Vuex中对数据。

Mutations

mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。在mutations中定义的每个方法都有两个默认参数，语法如下：

method(state,payload){
}

形参state表示当前Vuex对象中的state；形参payload是指该方法在被调用时传递的参数。
/store/index.js 文件代码如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  num: 0
  },
  mutations: {
	  add(state,i){
	     state.num += i
	  }
  }
})

在组件中使用 commit() 方法来提交数据，例如，在App.vue 文件中调用 mutations 内定义的函数，代码如下：

this.$store.commit('add',10)

上面示例代码中，执行 $store.commit() 方法可以将参数“10”传递给 mutations 内的 add() 方法，并为 state 中的数据重新赋值。如果要传递多个参数，可以使用对象的数据类型进行传值，代码如下：

this.$store.commit('add',{i:10, j:11})

Getters

可以对state中的成员做一系列运算后然后在向外返回数据，Getters中定义的方法有两个默认参数，代码如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  name: '张三',
	  age: 20
  },
  getters: {
	  nameInfo(state){
	        return "姓名："+state.name
	  },
	  fullInfo(state,getters){
	        return getters.nameInfo + " 年龄：" + state.age 
	  }
  }
})

Getters中定义的方法默认参数分别表示：

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

在组件内调用Getters方法，代码如下：

this.$store.getters.fullInfo

Actions

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

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
	  num: 0
  },
  mutations: {
	  add(state,payload){
	        state.num += payload
	  }
  }
  actions: {
	  add(context,payload){
	        setTimeout(()=>{
		   context.commit('add',payload)
	        },2000)
	  }
  }
})

Actions中的方法有两个默认参数，分别表示：

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

在组件内调用Actions中定义的函数，代码如下：

this.$store.dispatch('add',10)

由于是异步操作，所以我们可以为Actions中的异步方法封装为一个Promise对象，代码如下：

add(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('add',payload)
                resolve()
            },2000)
        })
}

Modules

当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。代码如下：

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

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
	  a:{
	      state: {},
	      getters: {},
	      //...
	  }
  }
})

在组件内调用模块a的状态，代码如下：

this.$store.state.a

而提交或者dispatch某个方法和以前一样,会自动执行所有模块内的对应type的方法，代码如下：

this.$store.commit('editKey')
this.$store.dispatch('aEditKey')

在使用Modules模块时，需要注意以下细节。
模块中mutations和getters中的方法接受的第一个参数是自身局部模块内部的state，代码如下：

models:{
    a:{
        state:{key:5},
        mutations:{
            editKey(state){
                state.key = 9
            }
        },
        ....
    }
}

getters中方法的第三个参数是根节点状态，代码如下：

models:{
    a:{
        state:{key:5},
        getters:{
            getKeyCount(state,getter,rootState){
                return  rootState.key + state.key
            }
        },
        ....
    }
}

actions中方法获取局部模块状态是context.state,根节点状态是context.rootState，代码如下：

models:{
    a:{
        state:{key:5},
        actions:{
            aEidtKey(context){
                if(context.state.key === context.rootState.key){
                    context.commit('editKey')
                }
            }
        },
        ....
    }
}

2.3 Vuex规范目录结构

如果把整个store都放在index.js中是不合理的，所以需要拆分。示例目录格式如下：

|- store
|-  actions.js
|-  getters.js
|-  index.js
|-  mutations.js
|-  mutations_type.js   ##该项为存放mutaions方法常量的文件，按需要可加入
|
|- modules
|- Astore.js

对应的内容存放在对应的文件中，在/store/index.js文件中存放并导出store对象。state中的数据尽量放在index.js中。而modules中的Astore局部模块状态如果多的话也可以进行细分。