Мутация VueX работает, но вычисляемое свойство компонента не работает - PullRequest
Новая
       12

Мутация VueX работает, но вычисляемое свойство компонента не работает

0 голосов
/ 10 февраля 2019

Я прочитал много вопросов и ответов по этой проблеме, но, похоже, я не решаю ни одну из проблем, описанных ранее.

Я перешел на использование модулей для своих состояний, но после настройки всего я вижу, что обновляется как локальное состояние модуля хранилища, так и получателя.Но вычисленное свойство не делает.Я не могу понять, какого черта это происходит, поэтому здесь я ищу помощь.

index.js 

import Vue from 'vue'
import Vuex from 'vuex'
import base_states from './modules/base_states'
import dialogs from './modules/dialogs'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    base_states,
    dialogs,
  },
})

dialogs.js 

// initial state
const state = {
  signInModalDialogComponent: 'signOn',
  attendanceModalDialogComponent: 'AttendanceDetails',
  dialogSignInVisible: false,
  dialogDonationVisible: false,
}

// getters
const getters = {
  signInModalDialogComponent: state => state.signInModalDialogComponent,
  attendanceModalDialogComponent: state => state.attendanceModalDialogComponent,
  dialogSignInVisible: state => state.dialogSignInVisible,
  dialogDonationVisible: state => state.dialogDonationVisible,
}

// actions
const actions = {}

// mutations
const mutations = {
  changeComponent(state, data){
    state.signInModalDialogComponent = data
  },
  changeAttendanceComponent(state, componentName){
    state.attendanceModalDialogComponent = componentName
  },
  toggleSignInVisibility(state, data){
    state.dialogSignInVisible = data
  },
  changeDonationVisibility(state, data){
    state.dialogDonationVisible = data
  },
}

export default {
  state,
  getters,
  actions,
  mutations
}

компонент(Я вынул кучу кода, который не связан) 

<template lang="pug">
...
    el-dialog(width='300px', :visible.sync='dialogSignInVisible')
      component(
        :is='signInModalDialogComponent',
        @componentchanged='dialogComponent = $event'
      )
</template>

<script type="text/javascript">
  import { mapGetters, mapMutations } from 'vuex';
  export default {
    computed: {
      ...mapGetters([
        'dialogSignInVisible',
        'signInModalDialogComponent',
      ]),
    },
    methods: {
      ...mapMutations([
        'toggleSignInVisibility'
      ]),
    }
  }
</script>

В частности, я смотрю на dialogSignInVisible, который не меняется.Как видно из инструментов разработчика, мутация проходит и меняет как локальное состояние, так и геттер.Но когда я смотрю на компонент, вычисленная привязка vuex не меняется.

Component

Dev tools Store

1 Ответ

0 голосов
/ 17 февраля 2019

Проблема была в том, что я использовал другой исполняемый файл Vue в моем магазине против моего пакета веб-пакетов.

Я использую import Vue from 'vue/dist/vue.esm' везде, но в store я использовал import Vue from 'vue'.Убедившись, что они одинаковые, все заработало без проблем.

...