如何在Vuex Store中访问vue-cookies？action调用$cookies提示未定义

嘿，这个问题我之前也踩过坑！Vuex的Store实例本身并不是Vue组件实例，所以直接用this.$cookies肯定会提示未定义——毕竟$cookies是挂载在Vue原型上的，只有组件里的this才能直接访问到。下面给你几个实用的解决办法：

方案一：直接导入vue-cookies模块（最推荐） #

vue-cookies本身可以作为独立的JS模块使用，不需要依赖Vue实例。你只需要在Store文件里直接导入它就行：

1. 在你的Store文件（比如store/index.js）顶部导入：

import VueCookies from 'vue-cookies'

2. 然后在action里直接调用，不用this：

actions: {
  async login({ commit }) {
    const response = await api.login() // 假设这是你的登录接口请求
    VueCookies.set("token", response.token, "7d");
    VueCookies.set("UserId", response.UserId, "7d");
    // 其他逻辑...
  }
}

这个方法简单直接，没有额外的配置，我自己平时开发里用得最多。

方案二：将Vue实例注入到Store中 #

如果你的项目已经全局注册了vue-cookies，也可以把Vue实例挂载到Store上，这样就能在action里访问$cookies了：

1. 在main.js中创建Store时，通过插件把Vue实例注入进去：

import Vue from 'vue'
import Vuex from 'vuex'
import VueCookies from 'vue-cookies'
import storeConfig from './store'

Vue.use(Vuex)
Vue.use(VueCookies)

const store = new Vuex.Store({
  ...storeConfig,
  plugins: [store => {
    // 把Vue实例挂载到store的$vue属性上
    store.$vue = Vue
  }]
})

2. 然后在action里这样使用：

actions: {
  async login({ commit, rootState }) {
    const response = await api.login()
    this.$vue.$cookies.set("token", response.token, "7d");
    this.$vue.$cookies.set("UserId", response.UserId, "7d");
  }
}

这个方法适合需要在多个action里使用Vue原型上其他属性的场景，但相比方案一略显繁琐。

方案三：调用action时传入$cookies实例 #

如果只是个别action需要用到cookies，也可以在组件dispatch action的时候，把this.$cookies作为参数传进去：

1. 在组件中dispatch action：

async handleLogin() {
  const response = await api.login()
  this.$store.dispatch('saveAuthInfo', {
    token: response.token,
    UserId: response.UserId,
    cookies: this.$cookies
  })
}

2. 在Store的action中接收并使用：

actions: {
  saveAuthInfo({ commit }, payload) {
    payload.cookies.set("token", payload.token, "7d");
    payload.cookies.set("UserId", payload.UserId, "7d");
    // 提交mutation等其他逻辑...
  }
}

这个方法耦合度低，适合局部使用的场景。

总的来说，方案一是最省心的选择，除非你有特殊需求，否则优先考虑直接导入vue-cookies模块~

内容的提问来源于stack exchange，提问作者Shamoon