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 中的方法体内容必须是同步操作
更新于:18天前