发布时间:2023-07-30 14:00
上一篇:
21 vue3 vuex的安装配置_十一月的萧邦-CSDN博客
紧接上篇:
本篇记录vue3中 vuex的取值操作,因为在写的项目中,我们大多都对vuex状态管理器进行了模块化的管理,所以我这里就直接模块化起步了,熟悉vue2的应该都知道吧?
目录结构如下:
在user.js中我们会去存放一些 用户的一些信息以及我们经常见的token,我直接开启的命名空间,如果对命名空间不太懂的,请看官网介绍:Module | Vuex
const user = {
namespaced: true, //开启命名空间 建议开启
state: {
name: \'xiaomi\',
token: \'token 123456789\',
sex: 1 //0=>代表女 | 1=>代表男 | 2=>代表保密
}
}
export default user
index.js
import {createStore} from \'vuex\'
import user from \"./modules/user\";
// 创建一个新的 store 实例
const store = createStore({
/*
在严格模式下,无论何时发生了状态变更且不是由 mutation 函数引起的,将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到
不要在发布环境下启用严格模式!严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式,以避免性能损失
*/
strict: process.env.NODE_ENV !== \'production\', //在开发状态下开启严格模式
modules: {
user
}
})
export default store
找到任意的页面
{{ obj }}
姓名: {{ name }}
姓名1: {{ name1 }}
token: {{ token }}
性别: {{ sex === 0 ? \'女\' : sex === 1 ? \'男\' : \'保密\' }}
页面展示 如下:success
下一篇:
23 vue3 vuex mutations的使用_十一月的萧邦-CSDN博客
[SpringBoot的@Async注解和关键字synchronized的使用]
SpringBoot整合Redis使用@Cacheable和RedisTemplate
chrome浏览器91版本SameSite by default cookies被移除后的解决方案,Chrome中跨域POST请求无法携带Cookie的解决方案
Vue3 $emit用法指南(含选项API、组合API及 setup 语法糖)
【云原生Kubernetes系列第一篇】深入理解容器集群管理系统Kubernetes(k8s)原理(相遇的意义在于彼此照亮)
使用Opencv+树莓派实现人脸识别(二)人脸识别和PyQt界面整合
使用Flink1.14 + Iceberg0.13构建数据湖