在 Quasar 中使用 store in component

Question

我正在尝试在 Quasar 项目中实现 Vuex 存储。我使用 quasar-cli 创建了一个新项目并选中了 Vuex 框。然后我按照类星体网站上的指南进行操作 (https://quasar.dev/quasar-cli/cli-documentation/vuex-store) 并使用 quasar new store test 创建了一家新商店然后我在 store/index.js

中注册了商店模块

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

之后，我添加了变异和状态代码，完全按照教程中的引用。然后我创建了一个新组件（测试）并按照说明添加了代码。

但是，我无法使用 this.$store，并且收到来自我的 IDE 的警告，指出 $store 未定义。我看过 Vuex 的文档，里面写到可以通过将状态添加到 main.js 中的对象来将状态传递给所有组件。据我所知，quasar 已经这样做了。

那么，我做错了什么？如何在不为每个组件手动导入的情况下使用商店？

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) 丢失

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))

在 Quasar 中使用 store in component

Using store in component with Quasar

vue.js

vuex

quasar