Vue3使用pinia之用法


Posted by hotmaneil on 2024-07-30

最近Vue3新開專案都會附上資料夾stores內的counter.ts之範例,其實有其它實用的寫法:
example.ts

import { defineStore } from 'pinia'

export const AccessControlList = defineStore('accessControlList', {
  state: () => ({
    /**
     * 暫存存取權限List
     */
    storeAccessControlList: [] as IRoleFunction[]
  }),

  actions: {
    /**
     * 設定全域存取權限List
     * @param value
     */
    setGlobalAccessControlList(value: IRoleFunction[]) {
      this.storeAccessControlList = value
    },

    /**
     * 移除全域存取權限List
     */
    removeGlobalAccessControlList() {
      this.storeAccessControlList = []
    }
  }
})

在其它頁面引用:

import { AccessControlList } from '@/stores/example'

const store = AccessControlList()
store.setGlobalAccessControlList(dataList)

store.removeGlobalAccessControlList()
export default defineComponent({
    computed: {
    ...mapState(AccessControlList, ['storeAccessControlList'])
  },
})

#vue3 #pinia







Related Posts

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy

[ 前端工具 ] - gulp, Babel, SCSS, uglyfy

物件屬性描述器 Property Descriptor(二)

物件屬性描述器 Property Descriptor(二)

七天打造自己的 Google Map 應用入門 - Day02

七天打造自己的 Google Map 應用入門 - Day02


Comments