配置 vuex 和 vuex 本地持久化

1. 安装vuex

npm i vuex

2. vuex配置
   ① 在根目录新建/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const config = {
   
    // 定义状态
    state: {
   
        isLogin: false
    },

    // getters
    getters: {
   
        // isLogin:(state) =>{
   
        //     return state.isLogin;
        // },
        // 等同上面的写法
        isLogin: state => state.isLogin
    },

    // 修改state里面的变量
    mutations: {
   
        // state指向上面的state,payload是调用muation时传过来的参数
        updateLogin(state, payload) {
   
            state.isLogin = payload;
        }
    },

    // action行为
    actions: {
   

    },

    // module
    modules: {
   

    }
}
export default new Vuex.Store(config);

② 在main.js导入并挂载到vue的实例上

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

Vue.config.productionTip = false

new Vue({
   
  store,
  render: h => h(App),
}).$mount('#app')

3.获取在vuex定义的状态

• 通过this.$store.state.xxx 来取,具体使用

created() {
   
    console.log(this.$store.state.isLogin);
    console.log(this.$store.state.firstName);
}

// 通常我们会定义计算属性来取值,比如
computed: {
   
    // 自定义计算属性
    isLogin() {
   
      // 获取vuex的isLogin的值
      return this.$store.state.isLogin
    }
}

• 通过辅助函数mapState来获取

  data() {
   
    return {
   
      addr: '广西'
    };
  },
 
 computed: mapState({
   
    // 取state里count的