页面刷新vuex中的数据就丢失的问题

页面刷新vuex中的数据会被刷新问题

解决办法：将vuex中的数据直接保存到浏览器缓存中（sessionStorage、localStorage、cookie）

• 存储到sessionStorage中，当页面关闭时，自动会将数据清除；可以存较大的数据；只能存储字符串类型的对象

• 存储到localStorage中，除非手动清除localStorage信息，否则这些信息将永远存在；只能存储字符串类型的对象

• 存储到cookie中，可以设置生命期

示例（存储到localStorage）：

// models/user.js文件中：
state(){
	userdata: JSON.parse(getuser())
},
const mutations = {
    SET_user: (state, data) => {
        state.userdata = data
        localStorage.setItem('vue_admin_template_user',JSON.stringify(data))
    }
},
const actions = {
  // user login
  async login(context, userInfo) {
    const { username, password } = userInfo
    const res = await login({ username: username.trim(), password: password })
    const token = res.token
    context.commit('SET_TOKEN', token)
    context.commit('SET_user', res)
  }
}


// getters.js中
const getters = {
  userdata: state => state.user.userdata
}
export default getters


// index.js中
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})
export default store


// 显示页文件中
<script>
    export default {
        computed: {
            ...mapGetters(['userdata'])
        }
    }
</script>

vue-router路由中 this.$router 与this.$route区别

this.$router 相当于一个全局的路由器对象，包含了很多属性和对象（比如 history 对象），任何页面都可以调用其 push(), replace(), go() 等方法。

this.$route 表示当前路由对象，每一个路由都会有一个 route 对象，是一个局部的对象，可以获取对应的 name, path, params, query 等属性。