programing

오류: "[vuex] 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 마십시오.

sourcetip 2022. 7. 12. 00:08
반응형

오류: "[vuex] 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 마십시오.

작은 배경 이야기
이것은 일반적인 에러인 것을 알고 있습니다.StackOverflow를 조사했는데 비슷한 문제를 찾을 수 없습니다.내 말은, 엄밀히 따지면 같은 제목을 가진 것도 있지만, 내 문제를 해결해주진 않아.

다음 문제는 내 문제와 동일하지 않습니다. vuex는 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않습니다.

Vue의 반응성과 관련된 Vuex 문서를 읽었는데 작동하지 않는 것 같습니다.이것이 Vuex의 문제인지 Quasar의 문제인지 전혀 알지 못했습니다.저는 한동안 이 문제로 고민했는데, 제가 모르는 단순한 것을 놓치고 있었던 것 같습니다.

다음과 같은 컴포넌트 파일이 있습니다.RouteTabs.vueQuasar의 QTabs 사용

<template>
  <q-tabs
    :value="tabName"
    @input="SET_TABNAME"
    dense
    no-caps
    inline-label
    indicator-color="white"
    class="bg-blue-10 text-light-blue-2 shadow-2"
  >
    <q-route-tab
      v-for="tab in tabs"
      :key="tab.label"
      :name="tab.name"
      :icon="tab.icon"
      :label="tab.label"
      :to="tab.to"
    />
  </q-tabs>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapGetters('pages/Dashboard', [
      'tabs',
      'tabName'
    ])
  },
  methods: {
    ...mapMutations('pages/Dashboard', [
      'SET_TABNAME'
    ])
  }
}
</script>

그리고 내 모듈은pages/Dashboard

const state = {
  tabs: [
    { name: 'vehicles', icon: 'time_to_leave', label: 'Vehicles', to: { name: 'dashboard/vehicles' } },
    { name: 'payments', icon: 'account_balance_wallet', label: 'Payments', to: { name: 'dashboard/payments' } },
    { name: 'guests', icon: 'emoji_people', label: 'Guests', to: { name: 'dashboard/guests' } }
  ],
  tabName: 'vehicles'
}

const getters = {
  tabs: state => state.tabs,
  tabName: state => state.tabName
}

const mutations = {
  'SET_TABNAME' (state, tabName) {
    state.tabName = tabName
    // ^ This updates the store successfully,
    // however the error came out same as the title
    // Vue.set(state, 'tabName', tabName) // Same as above
    // state = { ...state, tabName } // This isn't AND IT DOESN'T UPDATE
  }
}

더 자세한 정보가 필요하시면 꼭 문의해 주세요.기꺼이 제공하겠습니다.감사합니다.

언급URL : https://stackoverflow.com/questions/58076094/error-vuex-do-not-mutate-vuex-store-state-outside-mutation-handlers

반응형