未知操作类型：更改

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

App.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

您需要each_serializer: ScheduleSerializer到function removeDuplicates() { var sheet = SpreadsheetApp.getActiveSheet(); var data = sheet.getDataRange().getValues(); var newData = []; var ids = []; for (var i in data) { var row = data[i]; var duplicate = false; if (ids.indexOf(row[0]) > -1) { duplicate = true; } else { duplicate = false; ids.push(row[0]); } if (!duplicate) { newData.push(row); } } sheet.clearContents(); sheet.getRange(1, 1, newData.length, newData[0].length).setValues(newData); } ，然后在操作中if (@available( iOS 11.0, * )) { if ([[[UIApplication sharedApplication] keyWindow] safeAreaInsets].bottom > 0) { // iPhone with notch } } else { // Regular iPhone } 值将运行您的dispatch。同样，您的状态应该是对象而不是函数。

这是一个基本示例：

action

您应该现在就可以运行调度：

commit

Answer 2

最后，我发现了问题……我导入了错误的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')

感谢您的帮助！