一、安装以及引入
- 安装：
npm install pinia main.js文件：
import { createApp } from "vue";
import { createPinia } from "pinia";
import App from "./App.vue";const pinia = createPinia()
const app = createApp(App)
app.use(pinia).mount("#app");二、使用
新建store/Count/index.js：
import { defineStore } from "pinia";
import { personStore } from "../Person/index";
export const useCounterStore = defineStore('counter', {// state: ()=>({name: 'alice',count: 0}),state: () => {return {count: 10,content: '~'}},getters: { doubleCount: (state) => state.count * 2,// doublePlusOne:(state)=> state.doubleCount+1doublePlusOne() {return this.doubleCount + 1 // 可以访问其他getter},getUserById: (state) => { // getter是计算属性 不可以向getter传递参数，可以从getter返回函数 给该函数可以传递参数return (userId) => state.users.find((user) => user.id === userId)},// 访问其他store，访问 Person/index.jsgetOtherStoreName:(state)=>{const perStore=personStore()return perStore.username+state.content}},actions: {increment() {this.count++}}
})
新建store/Person/index.js:
import { defineStore } from "pinia";
export const personStore = defineStore('person', {state: () => {return {username: 'alice',age: 18,}},getters: {getName: (state) => `姓名：${state.username}`},actions: {changeName() {this.username = this.username + '~'}}
})
在App.vue文件使用：
<template><div class="app">
{{ store.doubleCount }}
{{ store.doublePlusOne }}
{{ store.getOtherStoreName }}</div>
</template><script setup name="App">
import { useCounterStore } from "./store/Count";
import { computed } from "vue";const store = useCounterStore();// 作为action的increment可以直接解构
const {increment}=storeconst doubleValue = computed(() => store.doubleCount);
</script>
