vuex

刷新消失的特性

vuex是刷新即清空数据的, 因为vuex的定位就是一个全局变量集,.
因此要在vuex中保存用户信息(之前放在localstorage中)等, 就要用到getters来跟踪localstorage中的数据, 同时在页面中使用mapGetters来映射取值

因为工程化vuex我们使用了module模块

//index.js
import Vue from 'vue'
import  vuex from 'vuex' 
Vue.use(vuex)

import user_store from './user_store.js' 
export default new vuex.Store({
  modules: {
    user: user_store
  }
})

//user_store.js
export default {
  state: 
    userId: '',
    userName: '',
  },
  getters: {
    userId: state => JSON.parse(window.localStorage.getItem('userInfo')).userId,
    userName: state => JSON.parse(window.localStorage.getItem('userInfo')).userName
  }
}

//.vue页面
import { mapGetters } from 'vuex'
export default {
  name: 'newArticle',
  computed: {
    ...mapGetters([
      'userId',
      'userName'  //console.log(this.userName即可)
    ])
  }
}

//或者你可以重命名他
...mapGetters({
  id: 'userId',
  name: 'userName'  //console.log(this.name即可)
})