定义状态管理器：首先要在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 定义状态

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    // 共享的状态
    // 页面刷新，状态管理器的状态会重置 ---- 需求  ---- 保留
    loginState: localStorage.getItem('loginState') === 'true' || false
  },
  mutations: { // 唯一改变数据的方式就是显示的提交mutation （提交-组件/actions）
    changeLoginState (state, data) {
      state.loginState = data
    }
  }
})

登录时保存状态（把true保存到状态管理器）

登录状态

底部组件获得登录状态

使用$store获取

退出登录 点击退出登录，把false保存到状态管理器，把localStorage清空，然后跳转到登录界面

退出登录