雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

Vuex 3.x 状态管理模式

2024-09-21 18
1. Vuex 介绍2. Vuex 安装3. Vue.js devtools 插件4. state 数据的访问方式5. getters 的使用详解6. mutations 的使用详解7. actions 的使用详解8. modules 的使用详解9. store 文件夹的目录组织10. vuex 用法总结

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天前
赞一波!

文章评论

评论问答