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>