vue3中Pinia的使用

安装

npm install pinia
npm install pinia-plugin-persistedstate

1.创建store文件夹，创建index.js文件

import {createPinia} from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'//数据持久化
const pinia = createPinia()
export pinia

2.在main文件中引入pinia并创建容器挂载到根实例上

import App from './App.vue';
import { createApp } from 'vue';
import { pinia} from '@/store/index.js';
 const app = createApp(App);
   app.use(pinia);
 app.mount('#app');

3.在store文件夹里创建modules文件夹,创建各个模块的，demo.js

import { defineStore } from 'pinia';
import { store } from '/@/store';

export const demoStore = defineStore({
  id: 'demoStore ',
    //persist: true,//保存整个模块这一句就够了
   persist: {
    enabled: true, // 开启缓存  默认会存储在本地localstorage
    ///一种
    storage: sessionStorage, // 缓存使用方式
    paths:[] ,// 需要缓存键 
    //二种
    strategies:[
    {
key:'demo',
//paths:[] ,// 需要缓存键 ,保存多个用path，一个用key
storage:sessionStorage
}
    ]
  }
  state: () => ({
    demo: '', // 测试
    count :''
   
  }),
  getters:{//支持this和传入state。
  gettersName:(state)=>state.demo.length，
  gettersNameLength:()=>this.demo.length
  },
  actions:{
   // 不能使用箭头函数定义action,因为箭头函数绑定外部this
  setDemo(data){
this.demo  = data
}
}
});

4.在模块中使用

<script lang="ts" setup>
import {demoStore} from '@/store/modules/demo.js
import { storeToRefs } from 'pinia'

const { count } = storeToRefs(useStore())//解构出store中的数据，storeToRefs可以保持响应式


const useDemo = demoStore()
console.log(useDemo.demo)
const change = ()=>{
useDemo.$patch({
demo:'1111111'//使用$patch修改可以提升性能，提高修改数据的速度
})

}
const getData = ()=>{
let data={}
useDemo.setDemo(data)
}

</script>