localstorage本地存儲及token，vuex刷新數據丟失問題⚡⚡⚡

1.vuex和axios安裝，引入，使用

1.1vuexa安裝和使用

vuex3.x版本的官網安裝教程:安裝 | Vuex

vuex4.x版本的官網安裝教程:安裝 | Vuex

npm install vuex --save

2.在src下新建文件夾store,並在文件夾中新建文件index.js,如下:

import Vuex from 'vuex'
// 引入user  模塊化modules
import user from '@/store/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // 註冊user模塊
    user
  }
})

***user.js爲了模塊化管理：需要在store/index.js裏面引入進來。

***整個store模塊在main.js裏也需要引入進來

store/index.js裏引入

 import Vue from 'vue'
import Vuex from 'vuex'

// 引入user  模塊化modules
import user from '@/store/user'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    // 註冊user模塊
    user
  }
})

main.js裏也需要引入進來

 import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入全局樣式
import '../src/assets/global.less'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

// 引入axios
import axios from 'axios'
// 配置axios
axios.defaults.baseURL = 'http://big-event-vue-api-t.itheima.net'
// 將axios掛在到vue原型上
Vue.prototype.$http = axios

// element全局註冊所有組件
Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

1.2axios安裝和使用

npm install axios -g

2.將token本地localstorage存儲

2.1.1  localstorage
在本地瀏覽器長期存儲，需要手動清除纔會消失(清除瀏覽器緩存或調用js方法清除）

2.2.2  sessionstorage
在本地瀏覽器存儲，但只存在一次會話級（即瀏覽器關閉再打開就沒了）

2.3.3  使用：
localstorage和sessionstorage使用一樣，下面的只需要替換就行

---

// 存：第一個參數爲存在本地的名字，即本地容器的名字
localstorage.setItem('token',b)
// 取：只有一個參數，即本地儲存容器的名字
localstorage.getItem('token')
// 清除:只有一個參數，即本地儲存容器的名字
localstorage.removeItem('token')
//清除所有
localstorage.clear()

2.1  登錄狀態token判定

在使用axios請求數據時：

//	具體的axios封裝就不在這寫了
//	請求攔截
axios.interceptors.request.use(config => {
	if (localstorage.getItem('token')) {
		const token = localstorage.getItem('token')	// 這裏本地瀏覽器存了的話就取出來
		config.Token = token	// config.Token 的這Token可自己設置，與後端協商一致即可
	}
	return config
})
// 響應攔截
axios.interceptors.response.use(config => {
	if (config.Token) {
		const token = config.Token
		localstorage.setItem('token',token )
	}
})

2.2 在使用vuex時刷新頁面，vuex的數據會重置:

這時就可以結合storage來解決,因爲頁面刷新必定會刷新最外層的APP.vue，所以這段就寫在app.vue好了

created () {
	window.addEventListener('beforeunload'，() => {
	// 不要忘了上面localstorage存數據的特性,用JSON.stringify
		sessionstorage.setItem('vuex',JSON.stringify(this.$store.state))
	})
	if(sessionstorage.getItem('vuex')) {
		this.$store.state = JSON.parse(sessionstorage.getItem('vuex'))
		//	因爲感覺在storage看的到vuex不舒服，所以就加上了這步
		sessionstorage.removeItem('vuex')
	}
}

---

我在自己的項目裏用到的方法是最基本的localstorage存儲方式：

成功的將token拿到了~ok

3.將token存儲Vuex

在login組件裏調這個store/user.js的方法：updateToken

vuex插件裏token數據拿到了~OK

4.刷新頁面vuex數據丟失問題

4.1原因：

vuex存儲的數據只是在頁面中，相當於全局變量，頁面刷新時vuex裏的數據會重新初始化，導致數據丟失
vuex裏的數據是保存在運行內存中的，當頁面刷新時，頁面會重新加載vue實例，vuex裏面的數據會被重新賦值

4.2 解決思路：

將vuex的數據直接保存在瀏覽器的緩存中（sessionStorage、localStorage、cookie）
頁面刷新後再從瀏覽器中取出

4.3 解決方法一

4.3.1選擇合適的瀏覽器存儲

       localStorage – 永久存儲在本地，除非主動刪除

       sessionStorage – 存儲在當前tab頁，關閉當前tab頁就會消失

       cookie – 根據設置的有效時間來存儲，缺點是內存小不能存儲大數據且不易讀取，會和後臺進行交互

注：一般vue會選擇sessionStorage，因爲一是vue是單頁面應用，操作都是在一個頁面跳轉路由，二是可以保證打開頁面時，sessionStorage的數據爲空，而如果是localStorage則會讀取上一次打開頁面的數據

4.3.2 把vuex裏的數據保存到sessionStorage中

頁面刷新的時候，監聽瀏覽器刷新前事件，在瀏覽器刷新之前就把vuex裏的數據保存到sessionStorage中，刷新成功後如果異步請求的數據未返回則直接獲取sessionStorage的數據

4.3.3 Vuex持久化插件(vuex-persistedstate)~推薦

原理：將vuex的state存在瀏覽器存儲中一份，刷新頁面的 一瞬間，vuex數據消失，會去瀏覽器存儲中拿回數據

vuex-persistedstate安裝使用方法可以網上查資料：https://blog.csdn.net/weixin_46846007/article/details/131165731

***推薦使用Vuex持久化插件(vuex-persistedstate)方法，自動將token和用戶信息存儲在vuex和localstorage裏

---

回來我們的話題：但是一旦頁面刷新，vuex的store的這個數據丟失了？？？

解決方法：需要同時也在localstorage裏存儲token數據，vuex的state的數據需要從localstorage獲取

store/user.js

 export default {
  namespaced: true,
  state:() => ({
    token:localStorage.getItem('token'),
  }),
  mutations:{

    updateToken (state, token) {
      state.token = token
      // 存入 localStorage
      // localStorage.setItem('token', token)
      localStorage.setItem('token',token)
    },
  },
  actions:{},
  getters:{}
}

數據不會再丟失了~~OK