Question

我已经习惯在Vuex上使用localStorage，但是正如您在SSR上所知道的，我们不能使用localeStorage。因此，我搜索了一种解决方案，以使Vuex state保持页面刷新，并与vuex-persistedstate一起多次使用到js-cookie中。我的问题是我真的需要vuex-persistedstate吗？我的意思是我可以像下面这样使用js-cookie：

import Cookie from 'js-cookie'

const state = {
  firstName: Cookie.get('firstName)
}

const mutations = {
  setFirstName(state, name) {
    state.firstName = name;
    Cookie.set('firstName', name)
}

等

Answer 1

关注您的评论问题。问题中的示例至少可以用于设置Cookie。我先将我的动作设置为一个动作，然后进行更改以仅设置状态。至于获取Cookie，您可能需要的不仅仅是设置状态。如我所说，我使用“ cookie”（see here）来获取我的cookie，然后通过nuxtServerInit来获取它们，如下所示：

nuxtServerInit({dispatch}, context) {
              return Promise.all([
                dispatch('get_cookies', context),
                //other actions
              ]);
            },

和动作本身如下：

get_cookies (vuexContext, context) {
              return new Promise((resolve, reject) => {
                const cookieConst = cookie.parse(context.req.headers.cookie || '')
                if (cookieConst.hasOwnProperty('YourCookieName')) {
                    //commit mutations here
                }
                else {
                    resolve(false)
                }
              })
            },

显然您需要导入：

import cookies from 'js-cookie'
import cookie from 'cookie'

您可以在Cookie中放入一些东西，我设置了用户详细信息和购物车。我还将访问令牌存储在cookie中，并在后端进行验证，这样我就可以保持身份验证状态。

在“通用”模式下使用NuxtJs管理Vuex状态

1 个答案: