Vue3 - Mengekalkan keadaan melalui penyegaran halaman

Question

Saya baru mula menggunakan Vue3 dan cuba menggunakan vuex untuk menguruskan keadaan. Apabila menggunakan Vue2, saya menghubungi kedai setiap kali aplikasi dimuatkan seperti ini:

// mains.js
import VueRouter from "vue-router";
import Vuex from "vuex";
import router from "./routes";

window.Vue = require('vue').default;
Vue.use(VueRouter);
Vue.use(VueMoment);
Vue.use(Vuex);

const store = new Vuex.Store(storeDefinition);

const app = new Vue({
    el: '#app',
    router,
    store,
    components: {
        "index": Index
    },
    async created() {
        this.$store.dispatch("loadStoredState");
        this.$store.dispatch("loadUser");
    },
});

Ini ialah kedai vuex saya, yang mentakrifkan keadaan, mutasi dan operasi vuex:

// store.js
import { isLoggedIn, logOut } from "./shared/utils/auth";

export default {
    state: {
        isLoggedIn: false,
        user: {}
    },
    mutations: {
        setUser(state, payload) {
            state.user = payload;
        },
        setLoggedIn(state, payload) {
            state.isLoggedIn = payload;
        }
    },
    actions: {
        loadStoredState(context) {
            context.commit("setLoggedIn", isLoggedIn());
        },
        async loadUser({ commit, dispatch }) {
            if (isLoggedIn()) {
                try {
                    const user = (await axios.get("/user")).data;
                    commit("setUser", user);
                    commit("setLoggedIn", true);
                } catch (error) {
                    dispatch("logout");
                }
            }
        },
        logout({ commit }) {
            commit("setUser", {});
            commit("setLoggedIn", false);
            logOut();
        }
    },
    getters: {}
}

Fail ini menguruskan kuki yang disimpan secara setempat yang menyimpan nilai boolean isLoggedIn:

// auth.js
export function isLoggedIn() {
    return localStorage.getItem("isLoggedIn") == 'true';
}

export function logIn() {
    localStorage.setItem("isLoggedIn", true);
}

export function logOut() {
    localStorage.setItem("isLoggedIn", false);
}

Tetapi dalam Vue3 saya sedang mencipta fail main.js seperti ini:

// mains.js
const { createApp } = require('vue')
import Index from './Index.vue'
import createRouter from './router'
import { createStore } from 'vuex'
import storeDefinition from "./store";

const store = createStore(storeDefinition)

createApp(Index)
    .use(createRouter())
    .use(store)
    .mount('#app')

Bagaimana untuk menambah dua panggilan untuk menguruskan kedai pada fungsi createApp?

Answer 1

Anda boleh menggunakan cangkuk extends 选项将 created yang ditambahkan pada komponen akar dengan definisi komponen:

// main.js
import { createApp } from 'vue'
import Index from './Index.vue'
import createRouter from './router'
import { createStore } from 'vuex'
import storeDefinition from './store'

const store = createStore(storeDefinition)

createApp({
    extends: Index,
    created() {
      this.$store.dispatch('loadStoredState')
      this.$store.dispatch('loadUser')
    },
  })
  .use(createRouter())
  .use(store)
  .mount('#app')

Demo