刷新消失的特性
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即可)
})
