Vue之Vuex详解与实例

深藏阁楼爱情的钟 2022-04-02 15:44 496阅读 0赞

# 前言 #

本文将从Vuex是什么开始讲，凡是涉及的概念，都会到[Vuex官网][Vuex]验证，然后转换成白文给大家，拒绝传递垃圾知识！学习的过程需要沉淀，还望读者耐心看完。

# Vuex理解 #

先来看一下，我们以前没有使用Vuex的一个简单应用。

<template>
        <div style="text-align: center;">
            <p>点击{
       {ClickCount}}次，ClickCount 是{
       {EvenOrOdd}}  </p>
            <button @click="increment">+</button>
            <button @click="decrement">-</button>
            <button @click="incrementIfOdd">奇数加1</button>
            <button @click="incrementAsync">异步加1</button>
        </div>
    </template>
    
    <script>
        export default {
            name: "vuex_test",
          data(){
              return{
                ClickCount:0
    
              }
          },
          computed:{
            EvenOrOdd(){
              return this.ClickCount %2 === 0 ? '偶数':'奇数';
            }
          },
          methods:{
            increment(){
              const count =this.ClickCount;
                this.ClickCount=count +1;
            },
            decrement(){
              const count =this.ClickCount;
              this.ClickCount = count- 1;
            },
            incrementIfOdd(){
              const count =this.ClickCount;
              if (this.ClickCount%2 === 1){
                this.ClickCount = count + 1;
              }
            },
            incrementAsync(){
              const count =this.ClickCount;
              setTimeout(()=>{
                  this.ClickCount = count + 1;
              },1000)
            },
          }
        }
    </script>
    
    <style scoped>
    
    </style>

## Vuex是什么？ ##

简单来说，就是对Vue的应用中多个组件的共享状态进行集中式的管理（读/写）。

## 状态自管理应用 ##

从官网拿的一张图（单向数据流），解读一下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70][]

*  **state，驱动应用的数据源；**

数据源就是组件里面的data

*  **view**，以声明方式将 **state** 映射到视图；

声明方式：就比如说上面例子中的 \{ \{ClickCount\}\} ，数据就可以显示出来。

*  **actions**，响应在 **view** 上的用户输入导致的状态变化。

actions说白了就是多个函数。

不知道你还记不记得[Vue的生命周期][Vue]，View的话，下面从初始化显示和更新显示两个方面来说。

### 初始化显示 ###

View（组件，也就是模板页面）读取State（状态）。

### 更新显示 ###

更新的起始点为View，它通过事件触发调用actions里面的某一个函数，然后actions去更新State的状态数据。State更新之后，View的界面也会随之改变。

## 多组间共享状态的问题 ##

比如说，当用户登录之后，用户的个人中心页面上有三个组件都需要获取到用户的登录状态（isLogin），这时就有了一个多组件共享状态的概念。

1) 多个视图依赖于同一状态

2) 来自不同视图的行为需要变更同一状态

3)  以前的解决办法

a. 将数据以及操作数据的行为都定义在父组件

b. 将数据以及操作数据的行为传递给需要的各个子组件(有可能需要多级传递）

4) vuex 就是用来解决这个问题的

下面讲一个实例带大家学习Vuex的核心和API。

# Vuex的核心概念和API #

先把概念拿出来，看一遍就可以了，主要理解实例中下面这些对象是如何运作的。

流程：View -> Actions -> Mutations -> State -> View

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1][]

### 1、 state ###

1)  vuex 管理的状态对象

2)  它应该是唯一的  
               const state = \{  
                   xxx: initValue  
                 \}

### 2、 mutations ###

1) 包含多个直接更新 state 的方法(回调函数)的对象  
                  2) 谁来触发: action 中的 commit('mutation 名称')  
                  3) 只能包含同步的代码, 不能写异步代码  
                      const mutations = \{  
                            yyy (state, \{data1\}) \{  
                               // 更新 state 的某个属性  
                          \}  
                      \}

### 3、 actions ###

1) 包含多个事件回调函数的

2) 通过执行: commit()来触发 mutation 的调用, 间接更新 sta

3) 谁来触发: 组件中: $store.dispatch('action 名称', data1) // 'zzz

4)  可以包含异步代码(axios)

const actions =\{

zzz (\{commit, state\}, data1)

commit('yyy', \{data1\})

### 4、 getters ###

1) 包含多个计算属性(get)的对象（也就是说，getters是用来放state里面的变量的计算属性的）

2) 谁来读取: 组件中: $store.getters.xxx

const getters =\{

mmm (state) \{

return ...

### 5、 modules ###

1) 包含多个 module

2)  一个 module 是一个 store 的配置对象

3) 与一个组件(包含有共享数据)对应

# Todolist的实例分析 #

我把源码打包免费给大家，然后主要讲一下Vuex的实现，也可以先看一下Vuex的运作流程。

有1积分直通车：[https://download.csdn.net/download/qq\_41647999/10880373][https_download.csdn.net_download_qq_41647999_10880373]

没有积分直通车：[https://pan.baidu.com/s/1xtTQEuwZfLph4Jtg-AvMUg][https_pan.baidu.com_s_1xtTQEuwZfLph4Jtg-AvMUg]，提取码：zllo

## store文件夹 ##

###      index.js ###

index.js是入口文件（Vuex最核心的管理对象）。

###     mutations-types.js ###

存放mutation的名称常量，

# Vuex的运作流程 #

## 详细流程图 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2][]

##  流程详解 ##

① 在组件（页面）中，通过dispatch()或mapActions()这个函数分发给actions的函数去处理。

② actions的函数可以与后台交互，也可以通过 commit() 提交给mutations去处理。

③ mutations 可以直接与devtool（如本地存储工具 → 在实例代码中的utils里的storageUtils.js）交互与直接更新state（数据状态）。

④ 如果有计算属性（get函数写在getters里面），则状态通过getters的$store.getters()或**mapGetters()**来更新组件；反之就通过$store.state()或者**mapState()**的方式来更新组件。

[Vuex]: https://vuex.vuejs.org/zh/guide/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70]: /images/20220402/1622d7d9e2964fa5aa20d15c9c25958c.png
[Vue]: https://blog.csdn.net/qq_41647999/article/details/85036981
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 1]: /images/20220402/7e52f77c784641e388fa67bee1c79c34.png
[https_download.csdn.net_download_qq_41647999_10880373]: https://download.csdn.net/download/qq_41647999/10880373
[https_pan.baidu.com_s_1xtTQEuwZfLph4Jtg-AvMUg]: https://pan.baidu.com/s/1xtTQEuwZfLph4Jtg-AvMUg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjQ3OTk5_size_16_color_FFFFFF_t_70 2]: /images/20220402/e6f2874b6d4f4d92a698c1a2112057a1.png