nuxt在js文件中访问vuex

nuxt在js文件中访问vuex

    • 一. nuxt无法在js文件中直接引用vuex的原因
    • 二. 解决方案
      • 1.解决思路
      • 2.解决window is not defined的问题
      • 3. 解决window.$nuxt输出为undefined的问题
    • 三、最终效果

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
nuxt在js文件中访问vuex_第1张图片

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这个参数的
nuxt在js文件中访问vuex_第2张图片

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

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

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

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

nuxt在js文件中访问vuex_第3张图片

三、最终效果

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

最终代码

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

vuex文件

nuxt在js文件中访问vuex_第4张图片
页面效果
nuxt在js文件中访问vuex_第5张图片

你可能感兴趣的:(js,vue框架,vue.js,前端)