在Quasar中使用store in component

Question

我正在尝试在Quasar项目中实现Vuex商店。我使用quasar-cli创建了一个新项目，并选中了Vuex框。然后，我遵循quasar网站(https://quasar.dev/quasar-cli/cli-documentation/vuex-store)上的指南，使用quasar new store test创建了一个新的商店，然后在商店/index.js中注册了商店模块

export default function(/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      test
      // example
    },

然后，我添加了突变和状态代码，与教程中引用的完全相同。然后，我创建了一个新组件(test)，并按照说明添加了代码。

但是，我无法使用this.$store，并且收到来自我的集成开发环境的警告，告诉我没有定义$store。我读过Vuex文档，它写道，通过将状态添加到main.js中的对象，可以将状态传递给所有组件。据我所知，类星体已经做到了这一点。

那么，我做错了什么?如果不手动为每个组件导入store，您如何使用store？

Answer 1

import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    // general state
    app
},
mutations: {
    someMutation (state, store) {

    }
  },
 actions: {
    someAction ({commit}) {

    },
})
export default store

另外，不要忘了在app.js中包含这个商店

Answer 2

我花了一段时间才让它工作，但这是我的状态的一个例子

    user :
        {
            uid: '',
            name: '',
            accountType: ''
        }
}

const mutations = {
    setName (state, val) {
        state.user.name = val
    },
    setUID (state, val) {
        state.user.uid = val
    },
    setAccountType (state, val) {
        state.user.accountType = val
    }
}

const actions = {
}

const getters = {
    user: (state) => {
        return state.user
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions,
    getters
}

然后，在每个文件中，如果您想要访问此信息，则必须使用

    computed : {
      user () {
            return this.$store.getters['user/user']
        }
    }

我想要在我的标记中显示此信息，并可以使用

<template>
    <div class="user-profile">
        {{ user.name }}
        {{ user.email }}
        {{ user.accountType }}
    </div>
</template>

希望这能有所帮助。

注意，我不是把模块放在文件夹中，而是全部放在一个文件'store-user.js‘中，而在我的store/index.js中，我有import user from './store-user'和

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      user
    }

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

Answer 3

威士(Vue.use)不见了

Vuex provides a mechanism to "inject" the store into all child components from the root component with the store option (enabled by Vue.use(Vuex))