22 vue3中使用vuex--- state取值操作

上一篇：

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

找到任意的页面

页面展示  如下：success

下一篇：

23 vue3 vuex mutations的使用_十一月的萧邦-CSDN博客