pinia的使用

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使用方式一致