【Vuex】核心概念解读-蒲公英云

目标

知道什么是Vuex
掌握Vuex的基本使用
掌握Vuex的核心概念及其用法

1. Vuex是什么

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

1.1 组件之间共享数据的方式

父向子传值：v-bind 属性绑定
子向父传值：v-on 事件绑定
兄弟组件之间共享数据： EventBus

$on 接收数据的那个组件
$emit 发送数据的那个组件

1.2 使用Vuex传值方式

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

在这里插入图片描述

1.3 使用 Vuex 统一管理状态的好处

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

1.4 什么样的数据适合存储到 Vuex 中

一般情况下，只有组件之间共享的数据，才有必要存储到 vuex 中；对于组件中的私有数据，依旧存储在组件
自身的 data 中即可。

2. Vuex 的基本使用

2.1 安装 vuex 依赖包

可通过可视化UI 面板安装依赖 Vuex。也可以npm 命令安装npm install vuex --save

2.2 导入 vuex 包

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

2.3 创建 store 对象

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

2.4 将 store 对象挂载到 vue 实例中

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

3. 核心概念概述

Vuex 中的主要核心概念包含：State 、Mutation 、Action 、Getter

3.1 State

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

示例：

// 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({ 
 state: {  count: 0 }
 })

组件访问state中数据的第一种方式：

this.$store.state.全局数据名称

组件访问state中数据的第二种方式：

// 1. 从 vuex 中按需导入 mapState 函数
import {  mapState } from 'vuex'
// 2. 将全局数据，映射为当前组件的计算属性
computed: { 
 ...mapState(['count'])
}

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

3.2 Mutation

Mutation 用于变更 Store中的数据

①： 只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据。
②：通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
③：mutations中的的函数一定要有state参数

示例：

// 定义 Mutation
 const store = new Vuex.Store({ 
 state: { 
 count: 0
 },
 mutations: { 
 add(state) { 
 // 变更状态
 state.count++
 }
 }
 })
// 触发mutation
 methods: { 
 handle1() { 
 // 触发 mutations 的第一种方式（也可直接将mutation函数写在事件函数处）
 this.$store.commit('add')
 }
 }

▶：可以在触发 mutations 时传递参数

示例：

// 定义Mutation
 const store = new Vuex.Store({ 
 state: { 
 count: 0
 },
 mutations: { 
 addN(state, step) { 
 // 变更状态
 state.count += step
 }
 }
 })
// 触发mutation
 methods: { 
 handle2() { 
 // 在调用 commit 函数，
 // 触发 mutations 时携带参数
 this.$store.commit('addN', 3)
 }
 }

▶：触发 mutations 的第二种方式

示例：

// 1. 从 vuex 中按需导入 mapMutations 函数
import {  mapMutations } from 'vuex'
// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: { 
 ...mapMutations(['add', 'addN'])
}

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

3.3 Action

Action 用于处理异步任务

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

示例：

// 定义 Action
 const store = new Vuex.Store({ 
 // ...省略其他代码
 mutations: { 
 add(state) { 
 state.count++
 }
 },
 actions: { 
 addAsync(context) { 
 setTimeout(() => { 
 context.commit('add')
 }, 1000)
 } 
 }
 })
// 触发 Action
 methods: { 
 handle() { 
 // 触发 actions 的第一种方式
 this.$store.dispatch('addAsync')
 }
 }

▶：触发 actions 异步任务时携带参数

示例：

// 定义 Action
 const store = new Vuex.Store({ 
 // ...省略其他代码
 mutations: { 
 addN(state, step) { 
 state.count += step
 }
 },
 actions: { 
 addNAsync(context, step) { 
 setTimeout(() => { 
 context.commit('addN', step)
 }, 1000)
 } 
 }
 })
// 触发 Action
 methods: { 
 handle() { 
 // 在调用 dispatch 函数，
 // 触发 actions 时携带参数
 this.$store.dispatch('addNAsync', 5)
 }
 }

▶：触发 actions 的第二种方式

示例：

// 1. 从 vuex 中按需导入 mapActions 函数
import {  mapActions } from 'vuex'
// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: { 
 ...mapActions(['addASync', 'addNASync'])
}

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

3.4 Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据

①： Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性。
②： Store 中数据发生变化，Getter 的数据也会跟着变化。

示例：

// 定义 Getter
 const store = new Vuex.Store({ 
 state: { 
 count: 0
 },
 getters: { 
 showNum: state => { 
 return '当前最新的数量是【'+ state.count +'】'
 }
 }
 })

▶：使用 getters 的第一种方式

this.$store.getters.名称

▶：使用 getters 的第二种方式

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

4. 综合本文代码的案例

对本文中 Vuex 的核心概念，进行了详尽的展示（通过调试工具，直观的展现数据的响应式变化）

4.1 效果预览

在这里插入图片描述

4.2 实现步骤

首先创建 含vuex 的 vue项目
然后修改App根组件，新增加法、减法两个新组建，实现页面基本布局

在store.js文件中需要管理的数据

import Vue from ‘vue’
import Vuex from ‘vuex’

Vue.use(Vuex)

export default new Vuex.Store({

state: { 
    num: 0
},
mutations: { 
    //# 只有mutations中的函数才有权限修改state中的数据
    add1(state) { 
        state.num++
    },
    sub1(state) { 
        state.num--
    },
    addN(state, step) { 
        state.num += step
    },
    subN(state, step) { 
        state.num -= step
    }
},
actions: { 
    //# 主要用于处理异步操作
    AddAsync(context) { 
        setTimeout(() => { 
            //# 在action中，不能直接修改state中的数据
            //# 必须通过 context.commit() 触发某个mutation 才行
            context.commit('add1')
        }, 1000)
    },
    SubAsync(context) { 
        setTimeout(() => { 
            //# 在action中，不能直接修改state中的数据
            //# 必须通过 context.commit() 触发某个mutation 才行
            context.commit('sub1')
        }, 1000)
    },
    //# 主要用于处理异步操作
    AddNAsync(context, step) { 
        setTimeout(() => { 
            context.commit('addN', step)
        }, 1000)
    },
    SubNAsync(context, step) { 
        setTimeout(() => { 
            context.commit('subN', step)
        }, 1000)
    }
},
getters: { 
    showNum(state) { 
        return '当前最新数值为【' + state.num + '】'
    }
},
modules: { }

})

两个组件使用 state 中的数据

组件1：

<template>
  <div>
    <!-- 第一种获取store数据的方法 -->
    <h1>{ { this.$store.getters.showNum}}</h1>
    <!-- 也可以直接在事件后写mutation函数(需要去除this，此处this指向button) -->
    <button @click="$store.commit('add1')">点击+1</button>
    <button @click="handle1">点击+3</button>
    <button @click="handle2">1秒后+1</button>
    <button @click="handle3">1秒后+5</button>
  </div>
</template>
<script>
export default { 
  methods: { 
    handle1() { 
      this.$store.commit('addN', 3);
    },
    handle2() { 
      this.$store.dispatch('AddAsync');
    },
    handle3() { 
      this.$store.dispatch('AddNAsync', 5);
    }
  }
};
</script>

组件2：

<template>
  <div>
    <!-- 此处为使用store数据的第二种方式 -->
    <h1>{ { showNum}}</h1>
    <button @click="sub1">点击-1</button>
    <button @click="handle">点击-2</button>
    <button @click="subN(2)">点击-2</button>
    <button @click="SubAsync">1秒后-1</button>
    <button @click="SubNAsync(4)">1秒后-4</button>
  </div>
</template>
<script>
import {  mapState, mapGetters } from 'vuex';
import {  mapMutations } from 'vuex';
import {  mapActions } from 'vuex';
export default { 
  data() { 
    return { };
  },
  computed: { 
    ...mapState(['num']),
    ...mapGetters(['showNum'])
  },
  methods: { 
    ...mapMutations(['sub1', 'subN']),
    ...mapActions(['SubAsync', 'SubNAsync']),
    //# 也可以把metations函数写在组件本身的函数中
    handle() { 
      this.subN(2);
    }
  }
};
</script>