업데이트 : 상태가 아닌 스토어를 수신하는 변환

업데이트 : 상태가 아닌 스토어를 수신하는 변환

이 게시물은 업데이트되었습니다. 첫 번째 답변을 참조하십시오.

그래서 우선 비슷한 문제를 찾아봤지만(몇 개의 스레드를 찾았지만) 해결이 되지 않았습니다.처음으로 퀘이사 프레임워크를 사용하려고 하는데 네임스페이스 같은 데서 길을 잃었나 봐요.

먼저 몇 가지 정보: +ESLint를 사용하여 컴파일 할 때 오류가 없습니다.
+실행 시 javascript 콘솔에 오류가 없습니다.
문제는 다음과 같습니다.
+액션과 변환은 스토어에 저장되지만 저장해야 할 위치에 저장해서는 안 됩니다(투고 말미에 스크린샷 참조).
+getter가 작동하지 않고 vue dev 도구에 "정의되지 않음"으로 표시됩니다.

저희 가게는 이렇게 구성되어 있습니다.

+store [folder]  
+ index.js  
+ app-utils [folder]  
--+ index.js  
--+ getters.js  
--+ actions.js  
--+ mutations.js  
--+ state.js  

root index.js 코드:
'vue'에서 Vue 가져오기 'vuex'에서 Vue 가져오기

import appUtils from './app-utils'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    appUtils
  }
})

export default store

그런 다음 'app-utils' 폴더: Code for index.js:

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
}

state.js 코드:

export default {
  state: {
    currentPageTitle: 'Hello'
  }
}

getters.js 코드:

export const getPageTitle = (state) => {
  console.log('GET TITLE: ' + state.currentPageTitle)
  return state.currentPageTitle
}

돌연변이 코드.js:

export const setPageTitle = (state, newPageTitle) => {
  console.log('MUTATION SET TITLE: ' + newPageTitle)
  state.currentPageTitle = newPageTitle
}

export const deletePageTitle = (state) => {
  console.log('MUTATION DELETE TITLE')
  state.currentPageTitle = ''
}

actions.js 코드:

export const setPageTitle = (context, newPageTitle) => {
  console.log('ACTION SET TITLE: ' + newPageTitle)
  context.commit('setPageTitle', newPageTitle)
}

export const deletePageTitle = (context) => {
  console.log('ACTION DELETE TITLE')
  context.commit('deletePageTitle')
}

액세스하려는 코드(getPageTitle 계산 필드 내):

<template>
  <q-page>
    <q-resize-observable @resize="onResize" /> TITLE : {{getPageTitle}}
    <div class="row">
    </div>
  </q-page>
</template>


import { mapGetters, mapActions } from 'vuex'

export default {
  data: () => ({
    pageSize: {
      height: 0,
      width: 0
    }
  }),
  mounted () {
    this.setPageTitle('Template manager')
  },
  destroyed () {
    this.deletePageTitle()
  },
  computed: {
    ...mapGetters('appUtils', [
      'getPageTitle'
    ])
  },
  methods: {
    ...mapActions('appUtils', [
      'setPageTitle',
      'deletePageTitle'
    ]),
    onResize (size) {
      this.pageSize = size
    }
  }
}
</script>

<style>
</style>

마지막으로 vue 플러그인의 스크린샷에서 mounted() 훅을 트리거할 때 값이 설정되었지만 '상태'가 아님을 알 수 있으며 getter는 정의되지 않았습니다.

vue dev 플러그인의 스크린샷

상태 객체는 다음과 같습니다.

export default {
  state: {
    currentPageTitle: 'Hello'
  }
}

이 모든 것이 getter 상태 파라미터로 전달됩니다.내보낸 개체 전체가 사용자의 상태이지 개체 내의 "상태" 속성이 아닙니다.두 가지 옵션이 있습니다.

옵션 1: getter를 업데이트하여 상태 내의 중첩된 "state" 속성에 액세스합니다.

export const getPageTitle = (state) => {
  console.log('GET TITLE: ' + state.state.currentPageTitle)
  return state.state.currentPageTitle
}

옵션 2(아마도 실제로 수행해야 할 작업): 상태 개체를 "상태" 속성이 없도록 변경합니다.

export default {
  currentPageTitle: 'Hello'
}

업데이트: 해결되었습니다.선택한 답변을 참조하십시오.

그래서 나는 내 문제를 해결했다.내 돌연변이로 보내진 첫 번째 인수는 국가가 아니라 스토어 자체인 것 같습니다.따라서:

이것은 동작하지 않는다.

export const setPageTitle = (state, newPageTitle) => {
 console.log('MUTATION SET TITLE: ' + newPageTitle)
 state.currentPageTitle = newPageTitle
}

이것은 동작합니다.

export const setPageTitle = (store, newPageTitle) => {
 console.log('MUTATION SET TITLE: ' + store.newPageTitle)
 store.state.currentPageTitle = newPageTitle
}

이것이 정상적인 동작입니까?의사는 첫 번째 논쟁은 국가 그 자체라고 말하는 것 같다.

언급URL : https://stackoverflow.com/questions/50144872/update-mutation-recieve-the-store-not-the-state