vue3使用pinia进行本地储存

1.安装

npm install pinia   
npm install pinia-plugin-persist

2.新建文件 src/store/index.ts

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store

3.main.js里面导入并使用store

import { createApp } from 'vue'
import App from './App.vue'

//加入路由
import router from './router/index';
//并通过use，使用路由
//导入store
import store from './store'

const app=createApp(App)
app.use(router)
//使用store
app.use(store)
app.mount('#app')

4.新建 /store/userStore.ts 文件

import { defineStore } from 'pinia'

export const userStore = defineStore({
  id: 'user',
  state:()=>{
  	return {
        name:""
  	}
  },
  getters:{

  },
  actions:{
  	
  },
    // 开启数据缓存
    persist: {
        enabled: true,
        strategies: [
            {
              key: 'my_user',
              storage: localStorage,
            }
          ]
      }
})

5.登录页面模拟本地存储

<template>
  登录页面
  <input type="text" v-model="inputname" />
  <button @click="btn">按钮</button>
</template>

<script lang="ts" setup>
import { userStore } from "../store/userStore";
import { storeToRefs } from "pinia";
import { ref } from "vue";

const inputname = ref("我是厨师长");
let { name, userInfo } = storeToRefs(userStore());

const btn = () => {
  name.value = inputname.value;
};
</script>