Vue专属状态管理库Pinia的使用与实践分享

npm install pinia

yarn add pinia

import { createApp } from 'vue';
import App from './App.vue';
import { createPinia } from 'pinia';

const app = createApp(App);

// 创建 Pinia 实例
const pinia = createPinia();

// 将 Pinia 注入到 Vue 应用
app.use(pinia);

app.mount('#app');

// src/stores/token.js
import { defineStore } from 'pinia';
import { ref } from 'vue';

// 定义一个名为 "token" 的 Store
export const useTokenStore = defineStore('token', () => {
  // 1. 定义响应式状态
  const token = ref('');

  // 2. 定义一个函数，设置新的 Token 值
  const setToken = (newToken) => {
    token.value = newToken;
  };

  // 3. 定义一个函数，清空 Token 值
  const removeToken = () => {
    token.value = '';
  };

  // 返回状态和函数
  return {
    token,
    setToken,
    removeToken,
  };
});

<template>
  <div>
    <p>当前 Token: {{ tokenStore.token }}</p>
    <button @click="updateToken">设置 Token</button>
    <button @click="clearToken">清空 Token</button>
  </div>
</template>

<script>
import { useTokenStore } from '@/stores/token';

export default {
  setup() {
    // 使用 Token Store
    const tokenStore = useTokenStore();

    // 更新 Token 的方法
    const updateToken = () => {
      tokenStore.setToken('new-token-value');
    };

    // 清空 Token 的方法
    const clearToken = () => {
      tokenStore.removeToken();
    };

    return { tokenStore, updateToken, clearToken };
  },
};
</script>

export const useTokenStore = defineStore('token', () => {
  const token = ref('');

  // 定义一个 Getter
  const isTokenAvailable = computed(() => !!token.value);

  return {
    token,
    isTokenAvailable,
  };
});

const tokenStore = useTokenStore();
console.log(tokenStore.isTokenAvailable); // true 或 false

export const useTokenStore = defineStore('token', () => {
  const token = ref('');

  // 异步设置 Token
  const fetchToken = async () => {
    const response = await fetch('/api/get-token');
    const data = await response.json();
    token.value = data.token;
  };

  return { token, fetchToken };
});