Неизвестный тип действия: изменить

Question

Я прочитал много постов здесь, и ни один из них не работал для меня.У меня очень простое приложение VueJS, но у меня возникает ошибка при записи чего-либо в мой первый компонент.Вот мой код:

main.js

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')

store.js

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

Vue.use(Vuex);

export const store = new Vuex.Store({
    state: {
        item: ''
    },
    mutations: {
        change(state, item) {
            state.item = item
        }
    },
    actions: {
        change({ commit }, newValue) {
            commit('change', newValue);
        }
    },
    getters: {
        item: item => state.item
    }
})

Приложение.vue

<template>
  <div id="app">
    <AddItem/>
    <DisplayItem/>
  </div>
</template>

<script>
import AddItem from './components/AddItemComponent'
import DisplayItem from './components/DisplayItemComponent'

export default {
  name: 'App',
  components: {
    AddItem,
    DisplayItem
  }
}
</script>

AddItemComponent.vue

<template>
    <div>
        <label for="item">Nom de l'objet</label><br/>
        <input type="text" name="item" @input="changed">
    </div>
</template>

<script>
export default {
    methods: {
        changed: function (event) {
            this.$store.dispatch('change', event.target.value)
        }
    }
}
</script>

DisplayItemComponent.vue

<template>
    <div>
        <p>Nom de l'objet : {{ $store.getters.item }}</p>
    </div>
</template>

... и наконец моя ошибка

Как я уже говорил, я много чего пробовал, но ни одна из них не сработала... Может я что-то забуду?

Заранее спасибо за помощь.

Answer 1

Наконец-то я нашел свою проблему ... Я неправильно импортировал store. Вот мой окончательный код, и он работает!

main.js

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

Vue.config.productionTip = false

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

Спасибо за любую помощь!

Answer 2

Вам нужно dispatch до action, затем в действии commit значение, которое будет запускать ваше mutation. Также ваше состояние должно быть объектом, а не функцией.

Вот базовый пример:

export const store = new Vuex.Store({
    state: {
        item: ''
    },
    mutations: {
        change(state, item) {
            state.item = item
        }
    },
    actions: {
        change({ commit }, modifiedValue) {
          // do some stuff
          commit('change', modifiedValue)
        }
    },
    getters: {
        item: item => state.item
    }
})

После этого вы сможете запустить отправку:

this.$store.dispatch('change', event.target.value)