定義狀態(tài)管理器：首先要在main.js中注冊store
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
// src/store/index.js 定義狀態(tài)
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 共享的狀態(tài)
// 頁面刷新束昵，狀態(tài)管理器的狀態(tài)會重置 ---- 需求 ---- 保留
loginState: localStorage.getItem('loginState') === 'true' || false
},
mutations: { // 唯一改變數(shù)據(jù)的方式就是顯示的提交mutation （提交-組件/actions）
changeLoginState (state, data) {
state.loginState = data
}
}
})
登錄時保存狀態(tài)（把true保存到狀態(tài)管理器）
登錄狀態(tài)
底部組件獲得登錄狀態(tài)
使用$store獲取
退出登錄 點擊退出登錄，把false保存到狀態(tài)管理器崎页，把localStorage清空惹谐，然后跳轉(zhuǎn)到登錄界面
退出登錄
