Vuex

一、Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用 集中式存储管理 应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

二、管理状态

多个界面共享，比如共享用户的登录状态、用户名称、头像、地理位置信息、商品的收藏、购物车中的物品（电商应用）等等。这些状态信息都可以放在统一的地方，对它进行保存和管理，而且它们还是响应式的。

三、单界面的状态管理

State：状态。（可以当做data中的属性）
View：视图层，可以针对State的变化，显示不同的信息。
Actions：Actions主要是用户的各种操作：点击、输入等等，会导致状态的改变。
例：

此案例中，需要进行状态管理的是个数counter。counter需要某种方式被记录下来，也就是State，counter目前的值需要被显示在界面中，也就是View部分，界面发生某些操作时（这里是用户的点击，也可以是用户的input），需要去更新状态，也就是Actions。

四、多界面状态管理

步骤：
1.在src中新建文件夹store
2.安装vuex插件

3.在store中添加文件index.js
4.在index.js中配置

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

//1.安装插件
Vue.use(Vuex)

// 2.创建对象
const store = new Vuex.Store({
    
  })

// 3.导出store独享
export default store

5.在main.js中导入

6.挂载在vue实例中，这样，在其他Vue组件中，我们就可以通过this.$store的方式，获取到这个store对象了。

注：store里的对象可以是state、mutation、actions、getters、modules

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  modules
})

五、Vuex状态管理图例

Devtools是一个插件，能够记录改变state的状态。
vue官方不建议vue组件直接修改state，而是通过流程图方法进行修改。允许直接通过修改mutations来修改state。若有异步操作，需要经过actions操作。

六、安装devtools插件

七、Mutation状态更新

Vuex的store状态的更新唯一方式：提交Mutation。
Mutation主要包括两部分：字符串的事件类型（type）、一个回调函数（handler）,该回调函数的第一个参数就是state。
在store的index.js中mutation的定义方式（修改state的方法）：

在App.vue的methods中通过mutation更新（注意：此处要通过commit来引用）：

methods:{
    addition(){
      this.$store.commit('increment')
    },
    subtraction(){
      this.$store.commit('decrement')
    }
  }

八、State单一状态树

如果状态信息是保存到多个Store对象中的，那么之后的管理和维护等等都会变得特别困难。所以Vuex也使用了单一状态树来管理应用层级的全部状态。单一状态树能够用最直接的方式找到某个状态的片段，而且在之后的维护和调试过程中，也可以非常方便的管理和维护。

九、Getters基本使用

什么时候使用计算属性？当数据想通过一系列变化后进行显示时，需要用到计算属性。

例：取counter的平方

在store的index.js中：

getters:{
    powerCounter(state){
      return state.counter * state.counter
    }
  },

在App.vue中

例2：获取学生年龄大于20的个数

方法一：在App.vue中添加计算属性：

computed: {
  more20stu() {
    return this.$store.state.students.filter(s => s.age > 20)
  }
}

方法二：在getters中添加：

getters:{
  more20stu(state){
    return state.students.filter(s => s.age > 20)
  }
}

在App.vue中

十、Getters作为参数和传递参数

例：获取年龄大于20岁学生的个数
在getters中添加

在App.vue中显示为

例：获取年龄大于age的学生。（通过getters动态获取）

getters中添加

moreAgeStu(state) {
  // return function (age) {
  //   return state.students.filter(s => s.age > age)
  // }
//返回一个函数，即在App.vue中得到的是一个函数，即可调用此函数
  return age => {
    return state.students.filter(s => s.age > age)
  }
}

在App.vue中可以调用函数并添加参数：

这里的参数是12，即我们会把年龄小于12的学生过滤：

十一、Mutation传递参数

例： 创建一个‘＋5’按钮和一个‘+10‘按钮。
步骤一：在index.js中添加mutations

mutations:{
  incrementCount(state,count){
    state.counter += count
  }
}

步骤二：在App.vue中添加methods：

methods:{
  addCount(count){
    this.$store.commit('incrementCount',count)
  }
}

步骤三：在App.vue组件中体现

显示：

例：点击按钮添加一个学生（在state的students中添加）

步骤一：在index.js中添加mutations

addStudent(state, stu) {
      state.students.push(stu)
    }

步骤二：在App.vue中添加methods

addStudent() {
  const stu = {id: 114, name: 'alan', age: 35}
  this.$store.commit('addStudent', stu) 
}

步骤三：添加App.vue中的组件信息

显示为：

点击添加学生后，显示：

十二、Mutation提交风格

类型一：普通提交风格
例：

addCount(count) {
  // 1.普通的提交封装
  this.$store.commit('incrementCount', count)

类型二：特殊的提交封装

this.$store.commit({
  type: 'incrementCount',
  count
})

注意：当它是一个包含type属性的对象时：

Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变, 依然如下:

十三、Mutation响应规则

Vuex的store中的state是响应式的, 当state中的数据发生改变时, Vue组件会自动更新.
规则：
1.提前在store中初始化好所需的属性.后加的属性不会添加进响应式系统。

2.当给state中的对象添加新属性时, 使用下面的方式:
方式一: 使用Vue.set(obj, ‘newProp’, 123)（注：obj是修改对象，比如state.xx；newprop是属性，比如name、age等；123是属性值，比如张三、12等）
delete方式删除做不到响应式——>Vue.delet(obj,‘newProp’)可以
方式二: 用新对象给旧对象赋值

十四、Mutation常量类型

在mutation中,定义了很多事件类型(也就是其中的方法名称).当项目增大时, Vuex管理的状态越来越多, 需要更新状态的情况越来越多, 那么意味着Mutation中的方法越来越多.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况.

在各种Flux实现中, 一种很常见的方案就是使用常量替代Mutation事件的类型.可以将这些常量放在一个单独的文件中, 方便管理以及让整个app所有的事件类型一目了然.

步骤一：创建一个文件: mutation-types.js, 并且在其中定义常量.

步骤二：定义常量时, 可以使用ES2015中的风格, 使用一个常量来作为函数的名称.

例：将increment函数写为常量
1.在mutation-types.js文件中写入：

export const INCREMENT = 'increment'

2.在App.vue中导入

import {
    INCREMENT
  } from './store/mutations-types'

3.在methods中可以修改：

4.mutation中可以修改：

即方法可以统一写为：

[test](){
}

5.在index.js中导入

import {
  INCREMENT
} from './mutations-types'

十五、Mutation同步函数

通常情况下, Vuex要求Mutation中的方法必须是同步方法.主要的原因是当使用devtools时, 可以devtools可以帮助我们捕捉mutation的快照。如果是异步操作, 那么devtools将不能很好的追踪这个操作什么时候会被完成。
例：

十六、Action

但是某些情况,希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候需要用到action。Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.

例：点击按钮修改Info中的内容
步骤一：在state中定义info

步骤二：在action中进行定义

    actions: {
      aUpdateInfo(context) {
        setTimeout(() => {
          context.commit('updateInfo')
        }, 1000)
      }
    }

步骤三：添加methods

注意：这里是dispatch。组件——>Action是dispatch

步骤四：App.vue中显示

步骤五：添加mutations

显示结果为：
点击修改信息后：

name改变

state中的name也发生改变。

同理，Actions也支持传递payload：

十七、Action的异步操作

在Action中, 可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.

十八、Modules（模块）

Vuex允许将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等
即：

1.模块里的state
步骤一：

步骤二：创建对象

步骤三：组件内显示

浏览器显示：


2.模块里的mutations

步骤一：为mutations添加内容

步骤二：在methods中添加方法

步骤三：在组件中显示

浏览器中显示：
点击修改名字后变为lisi

3.模块里的getters

步骤一：添加getters内容

步骤二：组件中显示

浏览器中:

若想拿到当前模板的getters，需要添加一个getters：

此时显示为：

若想引用大模块（根模块）中的组件：添加rootState

显示为：

4.模块里的actions

步骤一：添加actions

注意：
此处的commit只会调用自己模块中的mutation

步骤二：添加组件信息

步骤三：添加methods

显示为：
点击异步修改名字按钮后：

十九、对象的解构

const obj = {
  name:'aaa',
  age:'12',
  height:'188'
}

若想得到obj中的对象：

const {name , height , age} = obj

二十、项目结构

对于state：直接在index.js中操作

对于mutations：新建mutation.js文件夹


对于getters和actions同理

对于modules，新建文件夹modules，将模块全部放在文件夹中。