Question

im试图在类星体项目中实现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中的对象来将状态传递给所有组件。据我所知，类星体已经做到了。

那么我在做什么错了？如何在不为每个组件手动导入的情况下使用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）

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

在类星体中使用商店

3 个答案: