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

比眉伴天荒 2021-09-21 02:44 367阅读 0赞

### 文章目录 ###

*   *   *  Vuex
         *  状态管理是什么？
         *  管理什么状态
         *  先看一看定义的vuex基本结构
         *  官方流程图
         *  使用
         *  getters、actions的映射

--------------------

### Vuex ###

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

### 状态管理是什么？ ###

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

### 管理什么状态 ###

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

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

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

### 官方流程图 ###

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center]

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

详细过程如下图。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center 1]  
**详细流程：**

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 请指正！

[devtools extension]: https://github.com/vuejs/vue-devtools
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center]: /images/20210920/21acdc7d0b494b2fb7a67ee3a9d61ba9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzIxNzk0Mg_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210920/e73ab08645ec44ddac5530627e8a2823.png
[vuex modul]: https://vuex.vuejs.org/zh/guide/modules.html