姑苏网站建设手机电商网站开发
什么是全局状态管理?
所有页面全局共享的变量，而不是局限在某一个页面中。适合作为全局状态的数据: 已登录用户信息 (每个页面几乎都要用) Pinia 是一个主流的状态管理库，相比于 Vuex 来说使用更简单，可参考 入门文档 开始 | Pinia 进行引入 ；
1、引入 Pinia
此处由于 create-vue 脚手架已经帮我们整合了 Pinia，无需手动引入，直接使用即可
或者没有整合的话，使用命令安装 ：
yarn add pinia
# 或者使用 npm
npm install pinia 此处是使用 vue - create 脚手架自动生成的，这里举了一个管理一个计数器的状态的例子。
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'//一个状态就存储一类要共享的数狱(存一类常量)
// 使用 defineStore 定义了一个名为 'counter' 的 store。创建了一个简单的计数器 store，允许获取当前计数、获取计数的两倍值，并提供增加计数的功能
// 这个 store 包含了三个主要部分：状态（state）、计算属性（getters）和动作（actions）。
export const useCounterStore= defineStore('counter', () => {//定义状志的初始值 count = ref(0)：定义了一个名为 count 的响应式变量，初始值为 0。这个变量用于存储计数器的当前值。//定义受量的计算逻辑 getterconst count = ref(0)// 定义了一个计算属性 doubleCount，它始终返回 count 的两倍值。当 count 发生变化时，doubleCount 会自动更新。const doubleCount = computed(() => count.value * 2)// 定义怎么更改状态的方法 定义了一个方法 increment，用于将 count 的值加 1。function increment() {count.value++}// 返回 ，导出 Storereturn { count, doubleCount, increment }
})
2、定义状态
在 src/stores 目录下定义 user 模块，定义了用户的存储、远程获取、修改逻辑 :
import { defineStore } from "pinia";
import { ref } from "vue";export const useLoginUserStore = defineStore("loginUser", () => {const loginUser = ref<any>({userName: "未登录",});async function fetchLoginUser() {// todo 由于后端还没提供接口，暂时注释// const res = await getCurrentUser();// if (res.data.code === 0 && res.data.data) {// loginUser.value = res.data.data;// }}function setLoginUser(newLoginUser: any) {loginUser.value = newLoginUser;}return { loginUser, setLoginUser, fetchLoginUser };
});
3、使用状态
可以直接使用 store 中导出的状态变量和函数。
在首次进入到页面时，一般会尝试获取登录用户信息。修改 App.vue，编写远程获取数据代码:
const loginUserStore = useLoginUserStore()
loginUserStore.fetchLoginUser()
在任何页面中都可以使用数据，比如 GlobalHeader 全局顶部栏组件中直接展示：
{{ JSON.stringify(loginUserStore.loginUser) }}
修改全局顶部栏组件，在右侧展示登录状态
<div class="user-login-status"><div v-if="loginUserStore.loginUser.id">{{ loginUserStore.loginUser.userName ?? '无名' }}</div><div v-else><a-button type="primary" href="/user/login">登录</a-button></div>
</div>
4、测试全局状态管理
在 userstore 中编写测试代码，测试用户状态的更新:
async function fetchLoginUser() {// 测试用户登录，3 秒后登录setTimeout(() => {loginUser.value = { userName: '测试用户', id: 1 }}, 3000)
}