pinia 的简单使用（vue setup）

下文代码基于

• vue 3.x
• pinia 2.x

定义

pinia/index.ts

import { useUserStore } from './user';

// 统一导出useStore方法
export const useStore = () => {
  return {
    user: useUserStore(),
  };
};

pinia/user.ts

import { defineStore } from 'pinia';

interface UserStore {
  name: string;
}
export const useUserStore = defineStore('user', {
  state: (): UserStore => ({
    name: '',
  }),
  getters: {
    myName: (state) => {
      return state.name;
    }
  },
  actions: {
    setName(name: string) {
      this.name = name;
    },
    clearName() {
      this.setName('');
    },
  },
  // 开启数据持久化
  // 1.所有数据持久化
  // persist: true,
  // 2.持久化存储插件自定义配置
  persist: {
    // 修改存储中使用的键名称，默认为当前 Store的 id
    key: 'USER_KEY',
    // 修改为 sessionStorage，默认为 localStorage
    storage: window.sessionStorage,
    // 部分持久化状态的点符号路径数组，[]意味着没有状态被持久化（默认为 undefined ，持久化整个状态）
    paths: ['name'],
  },
});

index.ts

import { createApp } from 'vue';
import { createPinia } from 'pinia';
// pinia 数据持久化插件
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';

import App from './App.vue';

/**
 * pinia
 */
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);

createApp(App).use(pinia).mount('#app');

使用

xxx/xx.vue（vue setup）

import { useStore } from '@/pinia';
const { user } = useStore();

console.log(user.name);
user.clearName();
// ...

注意：useStore() 在非 setup 环境下，需要包含在方法中调用