1、安装pinia
pinia中没有mutations
pnpm add pinia //安装pinia
pnpm add pinia-plugin-persist // pinia数据持久化
2、使用pinia
首先是在main.ts中创建实例并在跟实例进行注册
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
//引入pinia,创建pinia实例
import {createPinia} from 'pinia'
const pinia=createPinia()
//在应用中注册store
createApp(App).use(pinia).mount('#app')
也可以选择将pinia拆分出来
新建store文件夹,index.ts
import {createPinia} from 'pinia'
const pinia=createPinia()
export ddefault pinia
然后在main.ts中引入store中的index.ts中导出的pinia
import pinia from "@/store"
//跟实例注册
app.use(pinia)
例如:user模块
创建userStore.ts文件
import {defineStore} from 'pinia';
interface UserType{
name:string,
age:number
}
interface UserStoreType{
user:string,
userList:UserType[],
const :number
}
export const userStore=defineStore('user',{
state: ()=> {
return{
user: '',
userList:[] ,
count: 0
} as UserStoreType
},
getters: {
doubleCount: (state)=> state.count * 2
},
//pinia中没有mutations 可以通过action直接修改store数据
//而且action中可以有异步操作
//和vuex比较,没有mutations 也没有modules
actions: {
// 不使用箭头函数
increment() {
//this代表state
this.count++;
},
})
使用userStore
在组件中引入userStore
<script>
import {useUserStore} from '../..store/userStore'
//直接使用解构赋值数据失去响应式,所以要引入这个storeToRefs,再进行解构赋值,数据会保持响应式
import {storeToRefs} from 'pinia'
const userStore=useUserStore()
//使用store中的数据(解构赋值)
const {count,double}=storeToRefs(userStore)
//action使用解构赋值
const {increment}=userStore
</script>
<template>
// 使用store中的数据 直接使用
<p>{{userStore.count}}</p>
<p>{{userStore.userList}}</p>
<button @click="userStore.increment">增加</button>
//使用解构赋值数据
<p>{{count}}</p>
<p>{{double}}</p>
<button @click="increment">增加</button>
</template>
可以创建多个store文件,跟userStore使用方式一致