Pinia

快速开始

import {
  createPinia,
  Pinia
} from 'pinia'
import persistedstate from 'pinia-plugin-persistedstate' /* 持久化插件 */

export const pinia: Pinia = createPinia()

pinia.use(persistedstate)

创建模块

• 使用 OptionsApi 创建

import { defineStore } from 'pinia'

export const useMenuStore = defineStore('menu', {
  state() {
    return {
      menus: []
    }
  },
  actions: {
    setMenu(router: any[]) {
      // 使用 this 访问 state 上的数据
      this.menuRouter = router
    }
  },
  persist: [{
    // ...
  }]
})

• 使用 CompsitionApi 创建

import { ref, computed } from 'vue'
import { defineStore } from 'pinia'

export const useMenuStore = defineStore('menu', () => {
  const rawMenus = ref<any[]>([])
  const menus = computed(() => menus)

  function getMenus() {
    // ...
  }

  return {
    menus,
    rawMenus,
    getMenus
  }
},
{
  persist: {
    // ...
  }
})