vue3版本的uniapp內置pinia,無需額外引入,有了pinia後就不需要App.vue內的globalData了,pinia還是響應式的,更好、更強大
main.js內配置
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);
app.use(Pinia.createPinia()); // 新增
return {
app,
Pinia // 新增
}
}
// #endif
根目錄新建store文件夾
你可以把pinia的store寫在model裏,比如在model裏新建一個user.js文件專門存儲user相關信息:
import { defineStore } from 'pinia';
import { ref } from "vue"
const userStore = () => {
const yourData = ref(false);
return {
yourData
};
};
export const useUserStore = defineStore('user', userStore);
頁面使用
<script setup>
import { useUserStore } from '@/store/model/user.js';
import { storeToRefs } from 'pinia';
const userStore = useUserStore();
const { yourData } = storeToRefs(userStore);
// 使用: yourData.value
</script>
另外你也可以配置pinia持久化,通過插件實現:pinia-plugin-persistedstate
npm i pinia-plugin-persistedstate
在store/config文件夾下新建index.js
/**
* https://prazdevs.github.io/pinia-plugin-persistedstate/zh/guide/config.html
* @description: 持久化配置
* @param {string} key 存儲的key
* @param {Array<string>} paths 需要持久化的字段
* @return {*}
*/
const persistedstateConfig = (key, storage, paths) => {
return {
key,
storage, // 存儲方式,使用localStorage,也可以使用sessionStorage
paths
};
};
export default persistedstateConfig;
改造user.js為持久化
import { defineStore } from 'pinia';
import { ref } from "vue"
import persistedstateConfig from '@/store/config/index.js';
const userStore = () => {
const yourData = ref(false);
return {
yourData
};
};
export const useUserStore = defineStore('user', userStore, {
persist: persistedstateConfig('user', localStorage, ['yourData'])
});