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

找到任意的页面

<template>
  {{ obj }}
  <div>
    姓名： {{ name }}
  </div>
  <div>
    姓名1： {{ name1 }}
  </div>
  <div>
    token： {{ token }}
  </div>
  <div>
    性别： {{ sex === 0 ? '女' : sex === 1 ? '男' : '保密' }}
  </div>
</template>

<script>
import {computed} from 'vue'
import {useStore} from "vuex" //1.从vuex中引入useStore

export default {
  name: "Test",
  setup() {
    let store = useStore();
    let name1 = useStore().state.user.name //错误的取值方式，虽然可以取出，但是丧失了响应式
    // 第一种写法
    let name = computed(() => store.state.user.name)  //正确的取值方式 采用computed计算属性此种写法，以保留响应性
    let token = computed(() => store.state.user.token)
    let sex = computed(() => store.state.user.sex)
    /
    // 第二种写法
    let obj = computed(() => store.state.user)

    return {
      name1,
      name,
      token,
      sex,
      obj
    }
  }
}
</script>

页面展示  如下：success

下一篇：

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