vue3 Pinia 基本使用

下载

# npm

   npm install pinia@next

# yarn

    yarn add pinia@next

引入

   在main.ts / js里引用 pinia的createPinia  然后用让app.use()加载一下这个函数

import { createApp } from 'vue'
import { createPinia } from "pinia"
import App from './App.vue'

import router from "./router/router"
const app = createApp(App)
app.use(router)
app.use(createPinia())

app.mount('#app')

创建Store 

import { defineStore } from "pinia"


export default defineStore({
    id: "#mian",
    state: () => ({
        name: "piniaName"
    }),
    getters: {
      gettersName: (state) => state.name.length
   },
    actions: {
     insertPost(data: string) {
            this.name = data
     }
   }, 
})

 使用及改变state里定义的变量 

   异步使用action

import { defineStore } from "pinia"


export default defineStore({
    id: "#mian",
    state: () => ({
        name: "piniaName"
    }),
    getters: {
      gettersName: (state) => state.name.length
   },
    actions: {
     async insertPost(data: string) {
           await // 内容
     }
   }, 
})