1 安装pinia
yarn add pinia
2 新建store文件夹
3 新建userInfo.ts文件
import { defineStore } from 'pinia'
export const userStore = defineStore({
id: 'userInfo', // 命名,唯一
state: () => {
return {
userInfo: {
id: 1,
age: 12,
name: 'tom'
},
count: 12
}
},
getters: {// 显示state中的数据
// 函数接收一个可选参数:state状态对象
count10(state) {
return state.count
},
},
// 开启数据缓存
persist: {
enabled: true,
},
actions: {
setUserInfo(data: any) {
// 可直接通过this访问state属性
this.userInfo = data;
},
addCount(num: number) {
this.count += num
}
}
})
4 main文件中use pinia
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import axios from 'axios'
import { createPinia } from 'pinia';// 引入
import piniaPluginPersist from 'pinia-plugin-persist';
const pinia = createPinia();// create
pinia.use(piniaPluginPersist);
const app = createApp(App);
app.use(pinia)// use pinia
app.mount('#app')
app.config.globalProperties.$axios = axios; //配置axios的全局引用
5 使用pinia
import { userStore } from "@/store/userInfo";// 引入
const userstore = userStore();
counts.value = userstore.count10;// 获取对应数据
let addCounts = () => {
userstore.addCount(10);// 修改数据
}