vue3+pinia的快速入门使用教程

npm install pinia --save

import { createPinia } from "pinia";
// 创建store实例
const store = createPinia();
export default store;

import store from '@/store/index.js'
const app = createApp(App);
app.use(store);

import { defineStore } from 'pinia'

export const userStore = defineStore({
    id: 'userInfo',  // 命名，唯一
    state: () => {
        return {
            userInfo: {}
        }
    },
    actions: {
        setUserInfo(data) {
            // 可直接通过this访问state属性
            this.userInfo = data;
        },
    }
})

import { userStore } from "@/store/userInfo.js";

export default defineComponent({
  setup() {
  const store = userStore();
	
  console.log('store实例', store);
  return {}
  },

npm install pinia-persistedstate-plugin

import type { App } from "vue";
import { createPinia } from "pinia";

import { createPersistedState } from "pinia-persistedstate-plugin";
const store = createPinia();
store.use(createPersistedState());
export function setupStore(app: App<Element>) {
  app.use(store);
}

export { store };