Декораторы модулей Vuex: доступ к модулю vuex из этого. $ Store не регистрирует модуль - PullRequest
Новая
       93

Декораторы модулей Vuex: доступ к модулю vuex из этого. $ Store не регистрирует модуль

0 голосов
/ 29 января 2020

В своем проекте я создал небольшой модуль vuex, используя vuex-module-decorators. Но при попытке доступа к нему напрямую из this.$store или $store в части шаблона регистрация не запускается.

Вот пример: 

// exampleModule.ts
import { Module, getModule, Mutation, VuexModule } from 'vuex-module-decorators';
import store from '@/store';

@Module({
  dynamic: true,
  namespaced: true,
  name: 'example',
  stateFactory: true,
  store,
})
class Example extends VuexModule {
  private work: boolean = false;

  get isWorking() {
    return this.work;
  }

  @Mutation
  setWorking(status: boolean) {
    this.work = status;
  }
}

export default getModule(Example);

// App.vue
<template>

  <div> 
    first attempt: {{ $store.getters['example/isWorking'] }} // this is not working
    second attempt: {{ isWorking }} // this is not working too
  </div> 
</template>

<script lang="ts">
  import Vue from 'vue';

  export default Vue.extend({
    computed: {
      isWorking() {
        return this.$store.getters['example/isWorking'];
      }
    }
  });
</script>

Единственный способ Я могу фактически зарегистрировать модуль и заставить его работать, это импортировать его непосредственно в компонент, например: 


<script lang="ts">
  import Vue from 'vue';
  import exampleModule from '@/store/modules/example/exampleModule';

  export default Vue.extend({
    computed: {
      isWorking() {
        return exampleModule.isWorking;
      }
    }
  });
</script>

Я что-то здесь упускаю? Это разыскиваемое поведение? Спасибо.

Кстати, я открыл вопрос об их репозитории на github, но у меня до сих пор нет ответов, поэтому вот я

https://github.com/championswimmer/vuex-module-decorators/issues/190

Ответы [ 3 ]

1 голос
/ 29 января 2020

Я не могу комментировать, поэтому я отвечу здесь. Вы импортировали свой магазин в основной файл. js? Может в этом проблема. Удачи!

0 голосов
/ 05 марта 2020

Первый импорт getModule и созданный вами модуль vuex 

import { getModule } from 'vuex-module-decorators'
import MyModule from '@/store/modules/MyModule'

Затем вы в основном хотите инициализировать свойство данных, которое имеет результат getModule, передавая ваш модуль и это. $ Store 

// .js
myModule: getModule(MyModule, this.$store)

// .ts
myModule: MyModule = getModule(MyModule, this.$store)

Наконец, вы можете получить доступ к любому состоянию, получателям, действиям и т. Д. c, используя ваш модуль непосредственно внутри вашего компонента. 

this.myModule.myData

this.myModule.myAction()

// ...
0 голосов
/ 20 февраля 2020

Также убедитесь, что вы импортировали модуль в файл index.ts вашего магазина и для ({ namespaced }) установлено значение true в вашем модуле. (что вы уже сделали)

Пример структуры папок: 

/store
└── /modules
    └── Example.ts
    └── Other.ts
    └── Products.ts
    └── ...
└── index.ts

index.ts 

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

Vue.use(Vuex)

import { Example } from './modules/Example'
import { Other } from './modules/Other'
import { Products } from './modules/Products'

export default new Vuex.Store({
  modules: {
    Example,
    Other, // Another module.
    Products // Another module.
  }
})

Example.ts 

import { Module, VuexModule, Mutation } from 'vuex-module-decorators'

@Module({ namespaced: true })
export class Example extends VuexModule {
  work = false // You don't need to specify with work: boolean as TS will know the type by itself.

  @Mutation
  setWorking(status: boolean) {
    this.work = status
  }

  get isWorking() {
    return this.work
  }
}

Приложение . vue

<template>
  <div> 
    first attempt: {{ $store.getters['Example/isWorking'] }}
  </div> 
</template>
...