【Vue】学习笔记十：Vuex——状态管理工具

---

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension ，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

状态管理是什么？

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

管理什么状态

• 登陆状态、用户名、头像等基本信息
• 在商城类的网站常保存收藏内容，购物车中的商品等
• 需要在vue多个组件使用的值

先看一看定义的vuex基本结构

import Vuex from 'vuex'
Vue.use(Vuex);
const store = new Vuew.store({
  state:{
  },
  mutations:{
  },
  actions:{
  },
  getters:{
  },
  modules:{
  }
});

官方流程图

通过图可以知道, 视图层(view)是依赖Actions的, 通过Actions可以修改state中的属性。

详细过程如下图。

详细流程：

1. view层通过dispatch函数调用actions层的方法
2. actions层的方法执行，并进行简单业务逻辑处理，然后通过commit调用mutations层的方法
3. mutations层的方法执行，并对state中的数据进行修改，此操作的每一步会被devtools记录，方便以后调试
4. state中的数据修改完成，watcher响应并通知视图层数据更新
5. view层进行渲染

使用

actions中的方法

	//context为上下文, 即指的是当前store, 不同的modules的context不同
    addCartGoods(context,payload){
            //todo
    },

mutations中的方法

    addGoodsCount(state,payload){
        payload.count++;
    },

getters中的方法–与vue component中的computed属性一般写法相同

    getterMethod(state){
        return state.xxx;
    }

视图层提交actions（即在vue component中）

    this.$store.dispatch('actionMethod', payload);//payload为所传递的数据

actions层调用mutations层方法

    // 方式1
    context.commit('mutationMethod',payload);
    
    //方式2
    context.commit({
        type:'mutationMethod',
        data:payload
    })

在state中添加和删除响应式变量/对象

//添加
Vue.set(state.对象, key, value);

//删除
Vue.delete(state.对象, key);

在vue响应式系统中添加对象都是通过此方法。

在module中使用

//module中actions的方法, context多了一个可选的rootState
mudoleActionsMethods(context,payload){
       
},
//解构写法
mudoleActionsMethods({state,commit,rootstate},payload){
       
},

//module中的mutations与之前的写的发相同

//module中 getters 的写法
getterMethodA(state[, getters][, rootstate]){
    //todo
    return xxx;
}

state会以模块名称挂载到$store.state的各个部分下。

//访问某个模块中的state数据
this.$store.state.模块名称.data

默认情况下(namespaced=true)，模块内部的 action、mutation 和 getter 是注册在全局命名空间, 这样使得多个模块能够对同一 mutation 或 action 作出响应。即模块中的getter/actions/mutations中的方法能像顶层对象中的gettter/actions/mutations那样使用。感兴趣访问官方vuex modul。

getters、actions的映射

将vuex中的getters和actions与vue component中的computed和motheds映射。

//导入
import {mapGetters, mapActions} from 'vuex'

//vue component中
methods:{
    ...mapActions([
        'actionMethodA',
        'actionMethodB',
        ...
    ]),
},
computed:{
    ...mapGetters([
        'getterMethodA',
        'getterMethodB',
        'getterMethodC',
        ...
    ]),
}

Q&A 请指正！