记录一次vuex和缓存的爬坑之旅

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: ''
})

②在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));