Vuex cookie存储

Question

我用vuex和nuxt开发了一个Vue js应用程序，存储如下：

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import * as Cookies from 'js-cookie'

Vue.use(Vuex)

export const state = () => ({
  authUser: null,
  sidebar: false
})

export const mutations = {
  toggleSidebar (state) {
    state.sidebar = !state.sidebar
  },
  SET_USER: function (state, user) {
    state.authUser = user
  }
}

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  strict: debug,
  plugins: [createPersistedState({
    storage: {
      getItem: key => Cookies.get(key),
      setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
      removeItem: key => Cookies.remove(key)
    }
  })]
})

// Polyfill for window.fetch()
require('whatwg-fetch')

export const actions = {
  // nuxtServerInit is called by Nuxt.js before server-rendering every page
  async login ({ commit }, { username, password }) {
    try {
      // const { data } = await axios.post('/api/login', { username, password })
      var data = username
      console.log(data)
      commit('SET_USER', data)
    } catch (error) {
      if (error.response && error.response.status === 401) {
        throw new Error('Bad credentials')
      }
      throw error
    }
  },

  async logout ({ commit }) {
    await axios.post('/api/logout')
    commit('SET_USER', null)
  }
}

和以下模板：

<template>
  <div>
    <h1>Super secret page, hello {{user}}</h1>
    <p>If you try to access this URL not connected, you will see the error page telling your that you are not connected.</p>
    <nuxt-link to="/">Back to the home page</nuxt-link>
  </div>
</template>

<script>
export default {
  computed: {
    user () {
      return store.state.count
    }
  },
  middleware: 'auth'
}
</script>

问题是，如果我在浏览器中重新打开选项卡或点击ctrl+f5 (因此实际上没有创建cookie )，我会丢失所有存储数据。另外，我不能访问我的模板中的用户名，有没有其他“正确”的方法来访问存储？

Answer 1

正确的处理方法是在你的商店中使用nuxtServerInit操作。这样，您就可以确保在渲染之前在服务器端调用它。

export const actions = {
 nuxtServerInit ({dispatch}, context) {
  // your logic
 }
}

Answer 2

您可以使用localStorage来持久化数据，这里是示例

actions: {
  setData ({commit}, payload) {
    localStorage.setItem('data', payload)
    commit('setData')
  }
}

如果你想获得这些数据，你可以使用下面的代码：localStorage.getItem('data')

此外，关于localStorage，请看这个Window.localStorage - Web APIs | MDN