動態

詳情 返回 返回

unaipp內使用pinia以及持久化緩存 - 動態 詳情

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文件夾

你可以把piniastore寫在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'])
});

參考資料:
uniapp-狀態管理
pinia-plugin-persistedstate

Add a new 評論

Some HTML is okay.