vue3中的pinia的使用

我们先下载

pnpm install pinia 

创建一个store文件夹，里面创建一个index.ts然后引入pinia

import {createpinia}  from "pinia";

const store = createpinia();

ewxport default  store;

打开mian.ts里面配置’

import store from "@/store";
app.use(store);

然后我们在store文件里再创建一个user.ts

//选项是写法
引入definePinia
import  {definePinia}  from "pinia";
const userStore = definePinia("userStore",{
      
    state:()=>{
         return{
              data:"这里是保存到pinia的数据"
          
           }
    
      
       },
       action:{
       
 
           }

})

export default  userStore;


组合式写法

import {ref}  from "vue";
const userStore = definePinia("userStore",()=>{
      
      const data = ref("这里是保存到pinia的数据");
      写函数
      const add = ()=>{
           console.log("函数使用")
        }
      
      return{ data ,add}

})

export default  userStore;

外面使用

import userStore from "./store/user";
实例化
const  userStoreLL = userStore();


在
<div>
    {{userStoreLL.data}}就可以显示了

</div>
<button @clcik="kobe"></button>
<script lang='ts' setup>
     const kobe = ()=>{
              userStoreLL.add(100)
  }
</script>

pinia持久化存储

首先安装

 pnpm i pinia-plugin-persistedstate 

然后引入并挂在

import persist from 'pinia-plugin-persistedstate'
 
const pinia=createPinia().use(persist)

然后使用

 persist:{
        enable:true,
        strategies:[
          {
              key:'my_user',
              storage:localStorage
          }
        ]
   }