第一步:配置pinia (main.js)
pinia 不用安装,框架自带了,直接导入就行了
import App from './App'
// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()
// #endif
// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
export function createApp() {
const app = createSSRApp(App)
const store = Pinia.createPinia()
app.use(store)
return {
app,
Pinia
}
}
// #endif
第二步:项目根目录新建一个store(随便取一个名称都行)文件夹,在此文件夹里新建一个pinia模块js,例如:user.js
// user.js
import { defineStore } from 'pinia';
export const useAppStore = defineStore('user', {
state: () => {
return {
userInfo: {},
isLogin: false,
}
},
getters: {
app_userInfo: (state) => state.userInfo,
app_isLogin: (state) => state.isLogin
},
actions: {
// 设置数据
async setData(key,data){
this[key] = data
},
// 获取数据
getData(key){
return this[key]
},
}
});
第三步:在页面中使用
script中使用
<script setup>
import { useAppStore } from '@/store/user';
const appStore = useAppStore();
// 设置用户信息(自定义函数设置数据)不喜欢这种方式的,可以用正经的方式设置,反正都是传参进去赋值
appStore.setData('userInfo', {
name: '张三',
age: 18
});
// 获取userInfo==actions自定义函数方式获取
let userInfo1 = appStore.getData('userInfo');
// 获取userInfo==getters方式获取
let userInfo2 = appStore.user_userInfo;
</script>
template中使用
<template>
<view class="content">
<view class="">
<!-- getters方式 -->
{{appStore.user_userInfo}}
</view>
<view class="">
<!-- actions自定义函数方式 -->
{{appStore.getData('userInfo')}}
</view>
</view>
</template>
数据持久化
安装这个持久化插件 pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
yarn add pinia-plugin-persistedstate
pnpm i pinia-plugin-persistedstate
修改一下main.js代码
// #ifdef VUE3
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';
import { createPersistedState } from 'pinia-plugin-persistedstate' //引入持久化插件
// 写个方法,配置一下持久化插件
const createPersistUni = () => {
return createPersistedState({
storage: {
getItem: uni.getStorageSync,
setItem: uni.setStorageSync
}
})
}
export function createApp() {
const app = createSSRApp(App)
const store = Pinia.createPinia()
// 使用持久化插件
store.use(createPersistUni());
app.use(store)
return {
app,
Pinia
}
}
// #endif
再修改一下user.js里的代码 增加这个字段 persist: true
import {
defineStore
} from 'pinia';
export const useAppStore = defineStore('user', {
state: () => {
return {
userInfo: {},
isLogin: false,
}
},
getters: {
user_userInfo: (state) => state.userInfo,
user_isLogin: (state) => state.isLogin
},
actions: {
// 设置数据
async setData(key, data) {
this[key] = data
},
// 获取数据
getData(key) {
return this[key]
},
},
persist: true // 开启持久化
});
网友评论