nuxt在js文件中访问vuex

nuxt因为某些特殊的原因，无法像传统的vue项目一样，在js文件中引入store文件就可以操作vuex

一. nuxt无法在js文件中直接引用vuex的原因

传统vue:

传统的vue项目需要自己在store目录下创建vuex管理文件，最后通过引入这个管理文件就可以操作vuex了

nuxt:

Nuxt.js 会尝试找到 src 目录（默认是应用根目录）下的 store 目录，如果该目录存在，它将做以下的事情：

引用 vuex 模块 将 vuex 模块 加到 vendors 构建配置中去 设置 Vue 根实例的 store 配置项

nuxt中的state必须是以函数的形式存在的

export const state = () => ({
  counter: 0
})

export const mutations = {
  increment(state) {
    state.counter++
  }
}

相比传统vue项目，nuxt的状态树是通过在store文件夹里面编写的js文件自动生成的，所以你无法通过引入store文件夹下面的文件使用vuex

二. 解决方案

1.解决思路

既然无法通过引用store文件来调用vuex，那么是否可以用别的方法代替这一步操作呢？

在查阅了无数资料过后，最终发现了一个突破口，nuxt会在实例化之后，将自身绑定到window上面，我们可以通过 window.$nuxt.$store来获取vuex实例

window.$nuxt.$store.xxx

但是当我使用这句代码的时候报了一个错误 window is not defined

2.解决window is not defined的问题

nuxt在渲染的时候分为客户端渲染和服务端渲染，服务端是无法获取到window对象的，所以才会报错window is not defined
想要解决这个问题需要在代码里判断一下渲染环境，使其在客户端的时候才会渲染这段代码

if(process.client) {
  console.log(window.$nuxt)
}

这时页面上已经没有报错了，但是在控制台上输出的却是 undefined

我一开始怀疑是不是$nuxt没有被绑定到window上，所以我又输出了一下window做了一下确认

if(process.client) {
  console.log(window)
}

可以明显的看到，window里面是有$nuxt这个参数的

3. 解决window.$nuxt输出为undefined的问题

接上一个问题，为什么在window里面明明绑定的有$nuxt这个参数，但是输出的值却是undefined呢？
在经历了长达十多分钟的自我怀疑中，我突然想到了一种可能，会不会是nuxt实例化太慢了，导致在js文件中输出的window虽然有 $nuxt这个参数，但是这个参数还没有完全被绑定成功？
抱着对这个问题的猜想，我在代码中加了一个延时器

if(process.client) {
  setTimeout(() => {
    console.log(window.$nuxt)
  }, 0)
}

果然，这个不要脸的家伙出现了。。。

三、最终效果

经过不“屑”的努力，终于把$nuxt的实例给弄出来了，看一下最终的效果

最终代码

if(process.client) {
  setTimeout(() => {
    window.$nuxt.$store.commit('user/exitLogin')
  }, 0)
}

vuex文件

页面效果