指定要在组件中使用的 Vuex Store [英] Specify Vuex Store To Use In Component

问题描述

我已经模块化了我的 Vuex 存储，并且需要子组件能够访问数据/使用与其父组件相同的存储.

这是我尝试过的:

<模板><div><子组件vuex-store=服务/机会"；/>

</模板><脚本>从 '@/components/services/child-components/ChildComponent' 导入 ChildComponent；import { mapActions, mapState, mapGetters } from 'vuex';导出默认{成分: {'子组件':子组件，},计算:{...mapState('服务/机会', {statusListOpportunities: 'statusListOpportunities',}),}}

<模板><div><!-- 内容-->

</模板><脚本>import { mapActions, mapState, mapGetters } from 'vuex';导出默认{道具: {VuexStore:{类型:字符串，},},计算:{...mapState(this.vuexStore, {statusListOpportunities: 'statusListOpportunities',}),}}

这是我得到的错误

<块引用>

未捕获的类型错误:无法读取未定义的属性 'vuexStore'

我一直在传递道具，但是道具杂耍变得混乱，如果我能指定组件应该使用哪个存储会容易得多.

我也无法直接在子组件中指定存储，因为 ParentTwo.vue 可能使用不同的存储，例如 services/cases.

任何人都知道为什么这行不通.我也愿意接受替代解决方案.

解决方案

查看下面演示中的 function=myMapState，用法=...mapState(this.vuexStore, ...) 遇到错误的上下文问题(this 不是组件实例).

一种解决方案是直接访问计算属性函数中的this.$store.state，就像下面演示中计算属性=test2 所做的那样.

Vue.config.productionTip = false让 myMapState = 函数(选项，测试){!test &&控制台错误(测试)返回 Vuex.mapState(options)}const store = new Vuex.Store({状态: {主题:光"，好:真实}})Vue.component('v-test', {模板:`<div><p>1:{{test1}}:{{test2}}</p><p>2:{{theme1}}</p></div>`，道具:['vuexStore']，计算:{...myMapState({'test1': this.vuexStore, 'theme1': 'theme'}, this.vuexStore),测试2:函数(){返回 this.$store.state[this.vuexStore]}}})新的 Vue({el: '#app',店铺})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script><div id="应用程序"><div><v-test :vuex-store="'theme'"></v-test><v-test :vuex-store="'good'"></v-test>

I have modularized my Vuex store and need child-components to be able to access data/use the same stores as their parent component.

Here's what I've tried:

<!-- ParentOne.vue -->
<template>
<div>
  <child-component
    vuex-store="services/opportunities"
  />
</div>
</template>

<script>
import ChildComponent from '@/components/services/child-components/ChildComponent';
import { mapActions, mapState, mapGetters } from 'vuex';

export default {
    components: {
        'child-component': ChildComponent,
    },

    computed: {
        ...mapState('services/opportunities', {
            statusListOpportunities: 'statusListOpportunities',
        }),
    }
}
</script>

<!-- ChildComponent.vue -->
<template>
<div>
  <!-- Content -->
</div>
</template>

<script>
import { mapActions, mapState, mapGetters } from 'vuex';

export default {
    props: {
        vuexStore: {
            type: String,
        },
    },

    computed: {
        ...mapState(this.vuexStore, {
            statusListOpportunities: 'statusListOpportunities',
        }),
    }
}
</script>

And here's the error I'm getting

Uncaught TypeError: Cannot read property 'vuexStore' of undefined

I've been passing down props, but the prop juggling is getting chaotic and it would be much easier if I could just specify which store a component should use.

I also not able to specify the store directly in the child component since ParentTwo.vue may use a different store such as services/cases.

Anyone have any idea why this wouldn't work. I'm open to alternative solutions as well.

解决方案

Look into the function=myMapState in below demo, the usage=...mapState(this.vuexStore, ...) encountered wrong context issue (this is not the component instance).

One solution is directly access this.$store.state in the function of computed property as what computed property=test2 does in below demo.

Vue.config.productionTip = false
let myMapState = function (options, test) {
   !test && console.error(test)
   return Vuex.mapState(options)
}
const store = new Vuex.Store({
  state: {
    theme: "light",
    good: true
  }
})
Vue.component('v-test', {
  template: `<div><p>1: {{test1}}: {{test2}}</p><p>2: {{theme1}}</p></div>`,
  props: ['vuexStore'],
  computed: {
    ...myMapState({'test1': this.vuexStore, 'theme1': 'theme'}, this.vuexStore),
    test2: function () {
      return this.$store.state[this.vuexStore]
    }
  }
})
new Vue({
  el: '#app',
  store
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app">
  <div>
    <v-test :vuex-store="'theme'"></v-test>
    <v-test :vuex-store="'good'"></v-test>
  </div>
</div>

这篇关于指定要在组件中使用的 Vuex Store的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！