반응형
오류: "[vuex] 변환 핸들러 외부에 있는 vuex 저장소 상태를 변환하지 마십시오.
작은 배경 이야기
이것은 일반적인 에러인 것을 알고 있습니다.StackOverflow를 조사했는데 비슷한 문제를 찾을 수 없습니다.내 말은, 엄밀히 따지면 같은 제목을 가진 것도 있지만, 내 문제를 해결해주진 않아.
다음 문제는 내 문제와 동일하지 않습니다. vuex는 변환 핸들러 외부의 vuex 저장소 상태를 변환하지 않습니다.
Vue의 반응성과 관련된 Vuex 문서를 읽었는데 작동하지 않는 것 같습니다.이것이 Vuex의 문제인지 Quasar의 문제인지 전혀 알지 못했습니다.저는 한동안 이 문제로 고민했는데, 제가 모르는 단순한 것을 놓치고 있었던 것 같습니다.
다음과 같은 컴포넌트 파일이 있습니다.RouteTabs.vue
Quasar의 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
반응형
'programing' 카테고리의 다른 글
C에서 디렉토리 목록을 얻으려면 어떻게 해야 하나요? (0) | 2022.07.12 |
---|---|
매초 같은 액션에 대한 Vuex 커밋이 느리다 (0) | 2022.07.12 |
vuex를 사용하여 페이지를 새로 고친 후에도 로그인 상태를 유지하는 방법 (0) | 2022.07.12 |
특정 연결에서 다른 인증서를 사용하려면 어떻게 해야 합니까? (0) | 2022.07.12 |
vuex 또는 redux의 코드에 영향을 미치는 UI 측을 배치할 위치를 지정하십시오. (0) | 2022.07.12 |