vuex的和缓存的使用
今天开发的一项功能里,需要将数据用户名存储起来,然后在页面里去调用并显示该用户的名字,刚好想练习一下vuex的使用,便尝试了使用vuex进行存储,存储过程是这样的:
vuex存储数据
1、首先安装并引入vuex
vuex的官网上安装操作,从安装到引入很详细
2、在src目录下新建一个store文件夹,及内部相关目录
在第一步引入完之后
①在main.js里引入
import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
el: '#app',
store,
components: { App },
template: '<App/>'
})
②在index.js里配置
import Vue from 'vue'
import Vuex from 'vuex'
import login from './modules/login'
Vue.use(Vuex)
export default new Vuex.Store({
modules:{
login
}
})
②modules里文件的基本代码
const state = {};
const getters = {};
const mutations = {};
const actions = {};
export default {
state,
getters,
mutations,
actions
}
③在要传值的页面上(这里是是在login.vue文件里,因为要获取到登录的手机号)
this.$store.dispatch('setAccount',res.data.data.phonenumber );
解释一下代码,这个是使用dispatch将数据传给vuex去存储,其中res.data.data.phonenumber 是要传递的值,即要显示在其他的页面的值;
④在modules的 js文件里的代码
const state = {};
const getters = {
getuname: (state) => state.account,
};
const mutations = {
SET_ACCOUNT (state, platform) {
state.account = platform;
},
};
const actions = {
// 用户登录的手机号码
setAccount ({commit}, platform) {
// console.log(platform);
commit('SET_ACCOUNT', platform);
},
};
export default {
state,
getters,
mutations,
actions
}
这里注意,getters里的名字不能和state里的数据是同一个名字;
⑤在要获取到值的页面通过下面代码来获取值
this.$store.getters.getuname;
但是!!!
在完成之后测试的时候发现,第一次请求的时候可以拿到值显示在页面上,但是一刷新页面就什么都没有了;查询之后知道了vuex存储数据时,每次刷新都会初始化,存储的数据也会初始化。
此时表示懵的一匹,又查询资料( 原谅本媛比较菜 , 嘿嘿嘿 )了解到可以将数据存起来,因此疯狂寻找缓存数据的方法,最后在js里的actions里拿到数据之后缓存起来
sessionStorage.setItem("phone", platform);
然后拿缓存中的数据
var punone = sessionStorage.getItem('phone');
运行,然后刷新页面,信息一直是在的,优秀
但是!!!
(不好意思,说话的习惯,我控制不住我自己)
关掉当前的窗口,开启新的窗口访问的时候,状态依旧是登录的,但是登录返回的用户名却显示不出来了,继续疯狂查资料,终于找到了
将sessionStorage换成localStorage就可以了
原因如下:
localStorage:关闭窗口后数据一直存在,并且在同源不同窗口下也能共享;
seesionStorage:当前窗口关闭前有效
没错,就是这样一波三折,终于成功,导致我今天很多事情都没有做完,所以现在依旧还在继续工作!不过,感觉学了很多东西,不错不错。
附上一个链接,介绍sessionStorage 、localStorage 和 cookie 之间的区别,感觉很不错
2010年1月13日补充:
注意,向localStorage中存储对象时,需要转成string再存储,否则getItem拿到的是[object, object]
localStorage.setItem('oscheduler-userInfo', JSON.stringify(this.userInfo));