Vuex 3.x 状态管理模式
1. Vuex 介绍
Vuex 官网: https://vuex.vuejs.org/zh
Vuex 的最新版是 Vuex 4.x 【当前时间 2022-10】
Vue 3 使用 Vuex 4，而 Vue 2 使用 Vuex 3，本文记录的是 Vuex3 的使用总结，Vuex 3.x 文档
一、组件之间共享数据的方式:
父向子传值: v-bind 属性绑定，子向父传值: v-on 事件绑定
二、那么页面之间如何共享数据呢 ？这就需要使用到 vuex 了
vuex 可以实现多个组件中共享状态（数据）
官方解释: Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式
换句话说，vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享
三、Vuex 术语
在 vuex 中，状态指的是共享的数据，也就是 vuex 的 state 的值
四、使用 vuex 统一管理状态的好处
a. 高效的实现数据共享，提高开发效率
b. 集中管理共享的数据，易于开发和后期维护
c. 存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步
2. Vuex 安装
将 vuex 安装为 运行时依赖【本文章默认项目环境为 vue 脚手架】
vue 脚手架需要安装该依赖，而 uniapp 项目已经内置 vuex，无需安装即可直接使用
npm install vuex --save创建文件: src/store/index.js, 文件内容如下:
import Vue from 'vue';import Vuex from 'vuex';// 1. 安装插件Vue.use(Vuex)// 2. 创建对象const store = new Vuex.Store({})// 3. 导入 store 对象export default store
在 main.js 中导入 store 对象，并将 store 对象挂载到 vue 实例上
import store from './store'new Vue({el: '#app',store,render: h => h(App)})
3. Vue.js devtools 插件
多个界面修改 vuex 状态时，这个工具会对状态进行跟踪，当出现问题时，可以更好的调试错误
4. state 数据的访问方式
方法一：通过 vue 实例访问
因为将 vuex 挂载到了 vue 实例中，所以 vuex 的数据可以通过 vue 实例访问
this.$store.state方法二：使用 mapState 函数将 vuex 数据映射为计算属性
// 1. 从 vuex 中按需导入 mapState 函数import { mapState } from 'vuex';// 2. 使用 mapState 函数将 vuex 数据映射为当前组件的计算属性 (computed)export default {computed: {...mapState(['token', 'userInfo'])}}// 也可以这样写export default {computed: mapState(['token', 'userInfo'])}
5. getters 的使用详解
使用场景: 当某一个数据需要经过一系列的操作后再返回时，可以使用 getters 处理
Getter 用于对 Store 中的数据进行加工处理形成新的数据，类似 Vue 的计算属性(computed)，起到一个包装器的作用，当 Store 中的数据发生变化时， Getter 的数据也会跟着变化
getters 方法定义:
const store = new Vuex.Store({state: {counter: 6},getters: {power(state) {return state.counter * state.counter}}})
调用 getters 的两种方式
方式一、使用 this.$store.getters.名称 调用 getters
// 调用方式this.$store.getters.power// 在组件模板中调用{{ $store.getters.power }}
getters 的其他用法参考下方代码示例:
{{ $store.getters.more20Stu }}{{ $store.getters.more20StuCount }}{{ $store.getters.moreAgeStu(20) }}
const store = new Vuex.Store({state: {students: [{ id: 1, name: "wang", age: 18 },{ id: 2, name: "liang", age: 21 },{ id: 3, name: "zhang", age: 30 },],},getters: {more20Stu(state) {// 获取年龄大于20的return state.students.filter(s => s.age > 20)},more20StuCount(state, getters) {// 获取年龄大于20的个数return getters.more20Stu.length},moreAgeStu(state) {// 如果要传参数,需要返回一个函数return age => {return state.students.filter(s => s.age > age)}}}})
方式二、使用 mapGetters 将 getters 方法映射为当前组件的计算属性
// 1. 从 vuex 中按需导入 mapGetters 函数import { mapGetters } from 'vuex';// 2. 使用 mapGetters 函数将 getters 方法映射为当前组件的计算属性 (computed)export default {computed: {...mapGetters(['power', 'total'])}}
6. mutations 的使用详解
vuex 的 state 数据更新的唯一方式: 提交 Mutation
mutations 用于变更 store 中的数据。只能通过 mutations 变更 store 数据，不能直接操作 store 数据，这种方式虽然操作起来繁琐一些，但是可以集中监控所有数据的变化
mutation 主要包括两部分: 事件类型 (type)、回调函数 (handler)
mutation 的定义方式:
a. increment 称为事件类型，回调函数的第一个参数永远就是 state
b. mutations 中的方法第二个参数被称为 mutations 的载荷 (payload)
{state: {counter: 1},mutations: {mutations: {increment(state) {state.counter++},decrement(state, num) {state.counter -= num},}}}
触发 mutation 的两种方式
方式一、使用 this.$store.commit 触发 mutations
// commit 的作用就是调用某个 mutation 函数this.$store.commit("increment");//不需要参数this.$store.commit("decrement", num);//传参
通过 commit 进行提交是一种普通的提交方式，vue 还提供了另外一种风格，它是一个包含 type 属性的对象
this.$store.commit({type: "add",num: 10,age: 20,});
此时要注意 mutation 中的方法的第二个参数的值，和普通提交方式可不一样
add(state, payload) {console.log(payload) // {type: 'add', num: 10, age: 20}}
方式二、使用 mapMutations 将 mutations 函数映射为当前组件的 methods 方法
// 1. 从 vuex 中按需导入 mapMutations 函数import { mapMutations, } from 'vuex';// 2. 使用 mapMutations 将 mutations 函数映射 methods 方法export default {methods: {...mapMutations(['login', 'getUserInfo']),}}
7. actions 的使用详解
vuex 要求 mutations 中的方法体内容必须是同步操作
更新于：2个月前