预填充 Vue.js 全局存储状态的三种方法

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    user: null  },  mutations: {    setUser (state, user) {      state.user = user    }  },})

<template>  <div>    <p v-if="user">Hi {{ user.name }}, welcome back!</p>    <p v-else>You should probably log in.</p>  </div></template><script>export default {  computed {    user() {      return this.$store.state.user    }  }}</script>

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    user: { name: "Austin" }  },  mutations: {    setUser (user) {      state.user = user    }  }})

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({  state: {    user: localStorage.get('user')  },  mutations: {    setUser (user) {      state.user = user    }  }})

<template>  <div>    <p v-if="user">Hi {{ user.name }}, welcome back!</p>    <p v-else>You should probably log in.</p>  </div></template><script>export default {  computed {    user() {      return this.$store.state.user    }  },  async mounted() {    const user = await getUser() // Assume getUser returns a user object with a name property    this.$store.commit('setUser', user)  }}</script>

<template>  <div>    <p v-if="loading">Loading...</p>    <p v-else-if="user">Hi {{ user.name }}, welcome back!</p>    <p v-else>You should probably log in.</p>  </div></template><script>export default {  data: () => ({    loading: false  }),  computed {    user() {      return this.$store.state.user    }  },  async mounted() {    this.loading = true    const user = await fetch('/user').then(r => r.json()) // Assume getUser returns a user object with a name property    this.$store.commit('setUser', user)    this.loading = false  }}</script>

import Vue from "vue"import store from "./store"import App from "./App.vue"fetch('/user')  .then(r => r.json())  .then((user) => {    store.commit('setUser', user)    new Vue({      store,      render: (h) => h(App),    }).$mount("#app")  })  .catch((error) => {    // Don't forget to handle this  })