亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Vue3 - Maintain state through page refresh
P粉959676410
P粉959676410 2024-03-25 23:22:06
0
1
675

I just started using Vue3 and trying to use vuex to manage state. When using Vue2, I call the store every time the app loads like this:

// 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");
    },
});

This is my vuex storage, which defines vuex's state, mutations and operations:

// 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: {}
}

This file manages a locally stored cookie that stores the boolean value of 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);
}

But in Vue3 I am creating a main.js file like this:

// 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')

How do I add the two calls to manage the store to the createApp function?

P粉959676410
P粉959676410

reply all(1)
P粉327903045

You can add the created hook to the root component using the extends option a> with the component definition:

// 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

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template