vue3中pinia入门使用

一、安装依赖

npm install pinia --save
npm install pinia-plugin-persistedstate --save

二、src目录下建立store，store下建立index.ts

//store/index.ts
import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia

三、man.ts引用

// 引入pinia
import pinia from "./store";
const app = createApp(App);
// pinia
app.use(pinia);
app.mount("#app");

四、基本使用

import { defineStore } from "pinia";
export const userLayout = defineStore("layout", {
  state: () => ({
    // 侧边栏展开与缩放
    asideCollapse: true,
  }),
  actions: {
    // 侧边栏展开、缩放
    controlCollapse() {
      this.asideCollapse = !this.asideCollapse;
    },
  },
});

五、页面中使用

import { userLayout } from "@/store/modules/layout";
const store = userLayout();
store.controlCollapse();