一、Vuex概述

vuex - 状态管理模式

状态管理模式、集中式存储管理这些名词听起来就非常高大上，让人有点捉摸不透。 其实，可以简单的将其看成把需要多个组件共享的变量全部存储在一个对象里面。 然后，将这个对象放在顶层的Vue实例中，让其他组件可以使用。

vue是响应式编程方式, 一个组件修改了状态, 其他组件能够实时响应么?这就是Vuex实现的功能.他的主要功能:

管理状态: 因为是将各种状态保存在一个地方, 所以也叫集中式存储管理 或者 集中式装填管理

响应式: 一个组件修改了状态, 其他组件能够实时响应

Vuex 是什么

Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享

使用Vuex统一管理好处

• 能够在Vuex中集中管理共享的数据，易于开发和后期维护
• 能够高效地实现组件之间的数据共享，提高开发效率
• 存储在Vuex中的数据都是响应式的，能够实时保持数据与页面的同步

管理哪些状态

如果你做过大型开放，你一定遇到过多个状态，在多个界面间的共享问题。

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

二、Vuex的基本使用

安装

npm install vuex --save

导入

import Vuex from 'vuex'
Vue.use(Vuex)

创建store对象

const store = new Vuex.Store({
    // state中存放的就是全局共享数据 
    state:{     
    count: 0 
    } 
})

挂载store对象

new Vue({ 
    el: '#app', 
    render: h=>h(app)m 
    router, 
    //将创建的共享数据对象,挂载到Vue实例中
    //所有的组件，就可以直接从store中获取全局的数据了
    store 
})

三、Vuex的核心概念

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

3.1 State

3.1.1 概念

State是提供唯一的公共数据源，所有共享的数据都要统一放到Store的State中进行存储。

export default new Vuex.Store({  
    state: {    
        count: 0  
    }
}

3.1.2 State数据访问方式

访问方式一

通过this.$store.state.全局数据名称访问，

<h3>当前最新Count值为：{{this.$store.state.count}}</h3>

访问方式二

从vuex中按需导入mapState函数

import { mapState } from 'vuex'

通过刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

<template>
  <div>
    <h3>当前最新Count值为：{{ count }}</h3>
    <button>-1</button>
  </div>
</template>
​
<script>
import { mapState } from "vuex";
​
export default {
  computed: {
    ...mapState(["count"])
  }
};
</script>
//当前组件可以通过 this.count 访问属性

3.2 Mutation

3.2.1 引入

如果想修改count的值，要怎么做呢？

也许聪明的你，已经想到，直接在组件中对this.$store.state.count进行操作即可，代码如下

<template>
  <div>
    <h3>当前最新Count值为：{{this.$store.state.count}}</h3>
    <button @click="add">+1</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    add() {
      this.$store.state.count++;
    }
  }
};
</script>

测试发现，这可以实现需求，完成+1操作。 但是，这种方法在vuex中是严格禁止的，那要怎么做呢？这时，就需要使用Mutation了。

3.2.2 概念

Mutation用于变更存储在Store中的数据。

• 只能通过mutation变更Store数据，不可以直接操作Store中的数据
• 通过这种方式，虽然操作稍微繁琐一些，但可以集中监控所有数据的变化，直接操作Store数据是无法进行监控的

3.2.3 定义Mutation函数

在mutations中定义函数，如下：

mutations: {    
      // 自增    
      add(state) {      
      state.count++    
      }  
  }

定义的函数会有一个默认参数state，这个就是存储在Store中的state对象。

3.2.4 调用Mutation函数

Mutation中不可以执行异步操作，如需异步，请在Action中处理

方式一

在组件中，通过this.$store.commit(方法名)完成触发，如下：

在mutations中定义函数时：

mutations: {    
      // 自增    
      add(state) {      
      state.count++    
      }  
  }

在组件中，调用如下：

methods: {
  add() {
    this.$store.commit("add");
  },
}

方式二

在组件中导入mapMutations函数

import { mapMutations } from 'vuex'

通过刚才导入的mapMutations函数，将需要的mutations函数映射为当前组件的methods方法：

methods:{
    ...mapMutations('add','addN'),
    // 当前组件设置的click方法
    addCount(){
        this.add()
    }
}

3.2.5 Mutation传递参数

在通过mutation更新数据的时候，有时候需携带一些额外的参数，此处，参数被称为mutation的载荷Payload。

如果仅有一个参数时，那payload对应的就是这个参数值

如果是多参数的话，那就会以对象的形式传递，此时的payload是一个对象，可以从对象中取出相关的数据。

在mutations中定义函数时，接收参数，示例如下：

mutations: {
    // 自增
    add(state) {
      state.count++
    },
    // 带参数
    addNum(state, payload) {
      state.count += payload.number
    }
  }

在组件中，调用如下：

methods: {
  add() {
    this.$store.commit("add");
  },
  addNum() {
    this.$store.commit("addNum", {
      number: 10
    });
  }

3.2.6 Mutation响应规则

Vuex的store中的State是响应式的，当State中的数据发生改变时，Vue组件也会自动更新。 这就要求我们必须遵守一些Vuex对应的规则：

• 提前在store中初始化好所需的属性
• 当给 State 中的对象添加新属性时，使用如下方式：
  • 使用Vue.set(obj,'newProp','propValue')
  • 用新对象给旧对象重新赋值

updateUserInfo(state) {
      // 方式一
      Vue.set('user', 'address', '北京市')
      // 方式二
      state.user = {
        ...state.user,
        'address': '上海市'
      }
    }

3.2.7 Mutation常量类型

引入

思考一个问题：

在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)，当项目越来越大时，Vuex管理的状态越来越多，需要更新状态的情况也越来越多，也就意味着Mutation中的方法越来越多。

当方法过多，使用者需要花费大量时间精力去记住这些方法，甚至多个文件间来回切换，查看方法名称，也存在拷贝或拼写错误的情况。

那么该如何避免呢？

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

解决方案

• 创建mutation-types.js文件，在其中定义常量
• 定义常量时, 可以使用ES2015中的风格, 使用一个常量来作为函数的名称
• 使用处引入文件即可

新建mutation-types.js

export const ADD_NUM = 'ADD_NUM'

在store/index.js中引入并使用：

import Vue from 'vue'
import Vuex from 'vuex'
import * as types from './mutation-type'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    user: {
      name: '旺财',
      age: 12
    }
  },
  mutations: {
    // 自增
    [types.ADD_NUM](state) {
      state.count++
    },
}

在组件中，引入并调用：

import { ADD_NUM } from "../store/mutation-type";
export default {
  methods: {
    add() {
      this.$store.commit(ADD_NUM);
    }
  }
};

3.3 Action

Action类似于Mutation，但是是用于处理异步任务的，比如网络请求等。

如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但在Action中还是要通过触发Mutation的方式间接变更数据。

3.3.1 参数context

在actions中定义的方法，都会有默认值context。

• context是和store对象具有相同方法和属性的对象
• 可以通过context进行commit相关操作，可以获取context.state数据 但他们并不是同一个对象，在Modules中会介绍到区别。

3.3.2 使用方式

方式一

在index.js中，添加actions及对应的方法：

export default new Vuex.Store({
  state: {
    count: 0
  },
 //只有 mutations 中定义的函数，才有权力修改 state 中的数据
  mutations: {
    // 自增
    add(state) {
      state.count++
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
      //在 action 中，不能直接修改 state 中的数据
      //必须通过 context.commit() 触发某个 mutation 才行
        context.commit('add')
      }, 1000);
    }
  }
})

在组件中调用：

export default {
  methods: {
    addNumSync(){
        // dispatch函数 专门用于触发 Action
        this.$store.dispatch('addAsync')
    }
  }
};

方式二

在组件中，导入mapActions函数

import { mapActions } from 'vuex'

通过刚才导入的mapActions函数，将需要的actions函数映射为当前组件的methods方法：

import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["addAsync"]),
    add() {
        this.addAsync()
    },
}

方式三

在导入mapActions后，可以直接将指定方法绑定在@click事件上。

...mapActions(["addAsync"]),
---------------------------
 <button @click="addAsync">+1(异步)</button>

该方式也适用于导入的mapMutations

3.3.3 Actions携带参数

在index.js的actions中，增加携带参数方法，如下：

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    // 带参数
    addNum(state, payload) {
      state.count += payload.number
    }
  },
  actions: {
    addAsyncParams(context, payload) {
      setTimeout(() => {
        context.commit('addNum', payload)
      }, 1000);
    }
  }
})

在组件中，调用如下：

methods: {
    addNumSyncParams() {
      this.$store.dispatch("addAsyncParams", {
        number: 100
      });
    }
  }

3.3.4 Actions与Promise结合

Promise经常用于异步操作，在Action中，可以将异步操作放在Promise中，并且在成功或失败后，调用对应的resolve或reject。

示例： 在store/index.js中，为actions添加异步方法：

actions: {
    loadUserInfo(context){
      return new Promise((resolve)=>{
        setTimeout(() => {
          context.commit('add')
          resolve()
        }, 2000);
      })
    }
  }

在组件中调用，如下：

methods: {
    addPromise() {
      this.$store.dispatch("loadUserInfo").then(res => {
        console.log("done");
      });
    }
}

3.4 Getter

• Getters用于对Store中的数据进行加工处理形成新的数据，类似于Vue中的计算属性
• Store中数据发生变化，Getters的数据也会跟随变化

使用方式

方式一

在index.js中定义getter

//定义 Getter
const store = new Vuex.Store({
    state:{
    count: 0
    },
    getters:{
        showNum(state){
          return '当前Count值为:['+state.count']'
        }
      }
})

在组件中使用：

//this.$store.getters.名称
<h3>{{ this.$store.getters.showNum }}</h3>

方式二

在组件中，导入mapGetters函数

import { mapGetters } from 'vuex'

通过刚才导入的mapGetters函数，将需要的getters函数映射为当前组件的computed方法：

computed: {
    ...mapGetters(["showNum"])
  }

使用时，直接调用即可：

<h3>{{ showNum }}</h3>

3.5 Modules

3.5.1 概念

Module是模块的意思，为什么会在Vuex中使用模块呢？

• Vues使用单一状态树，意味着很多状态都会交给Vuex来管理
• 当应用变的非常复杂时，Store对象就可能变的相当臃肿
• 为解决这个问题，Vuex允许我们将store分割成模块(Module)，并且每个模块拥有自己的State、Mutation、Actions、Getters等

3.5.2 使用

在store目录下，新建文件夹modules，用于存放各个模块的modules文件，此处以moduleA为例。

在modules文件夹中，新建moduleA.js，内部各属性state、mutations等都和之前一致，注释详见代码，示例如下：

export default {
    state: {
        name: '凤凰于飞'
    },
    actions: {
        aUpdateName(context) {
            setTimeout(() => {
                context.commit('updateName', '旺财')
            }, 1000);
        }
    },
    mutations: {
        updateName(state, payload) {
            state.name = payload
        }
    },
    getters: {
        fullName(state) {
            return state.name + '王昭君'
        },
        fullName2(state, getters) {
            // 通过getters调用本组方法
            return getters.fullName + ' 礼拜'
        },
        fullName3(state, getters, rootState) {
            // state代表当前module数据状态，rootState代表根节点数据状态
            return getters.fullName2 + rootState.counter
        }
    }
}

• 局部状态通过context.state暴露出来，根节点状态则为context.rootState 在store/index.js中引用moduleA，如下：

import Vue from "vue"
import Vuex from "vuex"

import moduleA from './modules/moduleA'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        a: moduleA
    }
})

export default store

这样就通过分模块完成了对状态管理的模块化拆分。

3.6 优化

如果项目非常复杂，除了分模块划分外，还可以将主模块的actions、mutations、getters等分别独立出去，拆分成单独的js文件，分别通过export导出，然后再index.js中导入使用。

示例： 分别将主模块的actions、mutations、getters独立成js文件并导出，以actions.js为例，

export default{
    aUpdateInfo(context, payload) {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                context.commit('updateInfo')
                resolve()
            }, 1000);
        })
    }
}

在store/index.js中，引入并使用，如下：

import Vue from "vue"
import Vuex from "vuex"
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
import moduleA from './modules/moduleA'


Vue.use(Vuex)

const state = {
    counter: 1000,
    students: [
        { id: 1, name: '旺财', age: 12 },
        { id: 2, name: '小强', age: 31 },
        { id: 3, name: '大明', age: 45 },
        { id: 4, name: '狗蛋', age: 78 }
    ],
    info: {
        name: 'keko'
    }
}

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

export default **store**

四、总结

vuex的核心思想：组件数据统一管理（统一存储，统一修改）

1. Vuex主要用于管理Vue组件中共享的数据。
2. Vuex中有state、mutation、action、getter等核心概念。
3. mutation只能用于修改数据，而Actions可以实现异步操作。
4. Getters函数用于对Store中数据进行加工，不会修改原本Store中的数据；Getters中的数据会受Store中数据进行影响。

vuex具体实现的核心概念概括

1. state 用来保存组件的数据

• 基本使用 this.$store.state.xx
• 简化用法 mapState

import { mapState } from "vuex";
​
export default {
  computed: {
    ...mapState(["count"])
  }
};

2. mutations 用来修改state中的数据（数据是响应式的）

• 基本使用 this.$store.commit()
• 简化用法 mapMutations

import { mapMutations } from 'vuex'

methods:{
    ...mapMutations('add','addN'),
    // 当前组件设置的click方法
    addCount(){
        this.add()
    }
}

3.actions 用来处理异步任务，获取异步的结果，但是不可以修改数据

• 基本使用 this.$store.commit(方法名)
• 简化用法 mapActions

import { mapActions } from "vuex";
export default {
  methods: {
    ...mapActions(["addAsync"]),
    add() {Î
        this.addAsync()
    },
}

4. getters 用来处理state中的数据，方便给组件提供符合需求的数据格式

• 基本使用 this.$store.getters.名称
• 简化用法 mapGetters

import { mapGetters } from 'vuex'
computed: {
    ...mapGetters(["showNum"])
  }

vuex项目应用

1、非父子的通信

2、后端数据的缓存快照，减少重复数据请求，减轻服务器压力，提高用户体验

vuex持久化 vuex-persistedstate