NuxtJS 存储状态变量不断返回未定义

Question

我总是遇到 NuxtJs 存储的问题 returns undefined 我发现了很多类似的问题，但是 none 已经解决了这个问题。这是我的代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state(){ 
        return{
            count: 500
        }
    },
    getters: {
        getCount: (state) => {
            state.count
        }
    },
})

然后我试着这样弄

this.$store.getters.getCount

也试过这个

computed: {
        ...mapGetters(['getCount'])
},
created(){
        console.log("count: "+this['getCount'])
}

这是错误：

Answer 1

Nuxt 会自动为您设置商店，因此您无需实例化自己的商店。

删除设置代码：

// REMOVE ALL THIS:
//
// import Vue from 'vue'
// import Vuex from 'vuex'
//
// Vue.use(Vuex)
//
// const store = new Vuex.Store({/*...*/})

并使用以下内容创建 store/index.js：

export const state = () => ({
  count: 500,
})

export const getters = {
  getCount: state => state.count,
}

现在，您可以在组件中访问商店：

export default {
  mounted() {
    console.log('count', this.$store.getters.getCount)
  }
}

demo

NuxtJS 存储状态变量不断返回未定义

NuxtJS store state variables keeps returning undefined

vue.js

vuex

nuxtjs