Vue 状态管理

概念

我的理解就是，在整个前端Vue项目中，有需要全局都使用到的对象，例如token，而状态管理就是跨文件、跨域的一个全局变量对象

Vue 使用 Pinia

1
2
3
4
5
6
7
8
9
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const pinia = createPinia()
const app = createApp(App)

app.use(pinia)
app.mount('#app')

例子

创建 store

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 导入 defineStore 函数，用于定义 Pinia 存储
import { defineStore } from 'pinia';
// 导入 ref 函数，用于创建响应式数据
import { ref } from 'vue';

/**
 * defineStore 参数描述：
 * - 'token'：给状态起名，存储的唯一标识符，用于在应用中引用该存储
 * - () => ({... })：一个函数，用于定义存储的内容和操作
 */
export const useTokenStore = defineStore('token', () => {
    // 使用 ref 创建一个响应式的 token 变量，初始值为空字符串
    const token = ref('');

    // 定义修改token的方法
    const setToken = (newToken) => {
        token.value = newToken;
    }

    // 定义移除token的方法
    const removeToken = () => {
        token.value = '';
    }

    // 返回 token 状态和操作
    return { token, setToken, removeToken };
});

使用 store

1
2
3
4
5
6
7
8
9
// 导入 useTokenStore 函数，用于获取 token 存储
import { useTokenStore } from '@/stores/token.js';

// 获取 token 存储实例
const tokenStore = useTokenStore();

// tokenStore.token;
// tokenStore.setToken('newToken');
// tokenStore.removeToken();

在pinia中定义的响应式数据，都不需要.value

pinia-persistedstate-plugin 参数持久化插件

pinia是在内存中的，一刷新就没有了，所以需要持久化插件，将数据保存到本地中

使用pinia-persistedstate-plugin插件

1
npm install pinia-persistedstate-plugin
1
2
3
4
5
6
7
import { createPinia } from 'pinia';
import { createPersistedState } from 'pinia-persistedstate-plugin';

const pinia = createPinia();
const persist = createPersistedState()

pinia.use(persist)

并在defineStore中添加persist参数

1
2
3
4
5
6
7
8
9
10
11
export const useTokenStore = defineStore('token', () => {
    const token = ref('');

    const setToken = (newToken) => {token.value = newToken;}

    const removeToken = () => {token.value = '';}

    return { token, setToken, removeToken };
}, {
    persist: true // 开启持久化存储
});