vuex 알 수 없는 로컬 변환 유형: updateValue, 글로벌 유형: app/updateValue.돌연변이가 작동하지 않음

vuex 알 수 없는 로컬 변환 유형: updateValue, 글로벌 유형: app/updateValue.돌연변이가 작동하지 않음

vuejs 응용 프로그램의 변수에 동작을 통한 돌연변이를 적용하려고 합니다.하지만 다음과 같은 오류가 발생합니다.[vuex] unknown local mutation type: updateValue, global type: app/updateValue

내 스토어 폴더 구조는 다음과 같습니다.

-store
    -modules
    -app
        -actions.js
        -getters.js
        -mutations.js
        -state.js
    -index.js
    -actions.js
    -getters.js
    -mutations.js
    -state.js
    -index.js

이것은 나의 ./store/index.js 파일입니다.

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

import actions from './actions'
import getters from './getters'
import modules from './modules'
import mutations from './mutations'
import state from './state'

Vue.use(Vuex)

const store = new Vuex.Store({
    namespaced: true,
    actions,
    getters,
    modules,
    mutations,
    state
})

export default store

이것은 저의 ./store/modules/index.js 입니다.

const requireModule = require.context('.', true, /\.js$/)
const modules = {}

requireModule.keys().forEach(fileName => {
    if (fileName === './index.js') return

    // Replace ./ and .js
    const path = fileName.replace(/(\.\/|\.js)/g, '')
    const [moduleName, imported] = path.split('/')

        if (!modules[moduleName]) {
            modules[moduleName] = {
            namespaced: true
        }
    }

    modules[moduleName][imported] = requireModule(fileName).default
})

export default modules

이것은 저의 ./store/modules/app/actions.js 입니다.

export const updateValue = ({commit}, payload) => {
    commit('updateValue', payload)
}

이것은 저의 ./store/modules/app/getters.js 입니다.

export const value = state => {
    return state.wruValue;
}

이것은 저의 ./store/modules/app/mutations.js 입니다.

import { set, toggle } from '@/utils/vuex'

export default {
    setDrawer: set('drawer'),
    setImage: set('image'),
    setColor: set('color'),
    toggleDrawer: toggle('drawer')
}

export const updateValue = (state, payload) => {
    state.wruValue = payload * 12;
}

이것은 저의 ./store/modules/app/state.js 입니다.

export default {
    drawer: null,
    color: 'green',
    wruValues:1,
    wruValue: 1,
}

마지막으로 이것이 저의 vue 컴포넌트입니다.

<v-btn @click="updateValue(10)">
    SHOW
</v-btn>

import { mapActions } from 'vuex';
...mapActions ('app',[
                'updateValue'
            ]),

이 버튼을 클릭하면wruValue변경(테스트를 위해 다른 곳에 값을 인쇄합니다)하지만 위에 언급된 오류가 나타납니다.내 코드에 무슨 문제가 있나요?

commit('updateValue', payload, {root: true})

하지만 난 네가 네임스페이스를 쓰는 게 이상하다고 생각해.프로젝트에서는 getter, action 등의 파일을 구분하지 않고 작업, 프로젝트, 회사 등을 구분합니다.그래도 괜찮으시다면 괜찮습니다.그건 문제가 아닌 것 같아요.그래도 오류가 발생하면 "updateValue"를 "mutations/updateValue"로 변경해야 할 수 있습니다.

다음 프로젝트 구조를 사용해야 합니다.

src/store/module/app.module

export const state = {
  drawer: null,
  color: 'green',
  wruValues: 1,
  wruValue: 1
}

export const mutations = {
  UPDATE_VALUE: (state, payload) => {
    state.wruValue = payload * 12
  }
}

export const actions = {
  updateValue: ({ commit }, payload) => {
    commit('UPDATE_VALUE', payload)
  }
}

export const getters = {
  getWruValue: (state) => state.wruValue
}

src/store/index.disples

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

Vue.use(Vuex)

const requireContext = require.context('./modules', true, /.*\.js$/)

const modules = requireContext.keys()
  .map(file =>
    [file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
  )
  .reduce((modules, [name, module]) => {
    if (module.namespaced === undefined) {
      module.namespaced = true
    }

    return { ...modules, [name]: module }
  }, {})

export default new Vuex.Store({
  modules
})

src/main.disples

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

src/App.vue

<template>
  <div id="app">
    <button @click="updateValue(10)">
      SHOW
    </button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default {
  methods: {
    ...mapActions('app', ['updateValue'])
  }
}
</script>

새로운 스토어 네임스페이스를 추가하려면 src/modules 폴더에 저장해야 합니다.

언급URL : https://stackoverflow.com/questions/57280323/vuex-unknown-local-mutation-type-updatevalue-global-type-app-updatevalue-mut