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里定义的变量 

<template>
  <div>{{ piniaStore.name }}</div>
  <div>长度：{{ piniaStore.gettersName}}</div>
  <button @click="setPiniaState">修改</button>
  <button @click="callAction">调用Action</button>
</template>

<script setup lang="ts">
import useMainStore from "@/piniaStore";
const piniaStore = useMainStore();
const setPiniaState = () => {
  piniaStore.$patch({
    name: "123456",  //使用$patch修改
  });
};
const callAction = () => {
  piniaStore.insertPost("123"); //这里直接同步调用action 也可以异步使用
};
</script>

   异步使用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 // 内容
     }
   }, 
})

   

<template>
  <div>{{ piniaStore.name }}</div>
  <div>长度：{{ piniaStore.gettersName}}</div>
  <button @click="setPiniaState">修改</button>
  <button @click="callAction">调用Action</button>
</template>

<script setup lang="ts">
import useMainStore from "@/piniaStore";
const piniaStore = useMainStore();
const setPiniaState = () => {
  piniaStore.$patch({
    name: "123456",  //使用$patch修改
  });
};
const callAction = () => {
  piniaStore.insertPost("123").then(()=>{
       
  }); 
};
</script>