如何在 Vuex 中设计一个 store 来处理嵌套的自定义组件中的点击? [英] How to design a store in Vuex to handle clicks in nested, custom components?
问题描述
我正在尝试设计一个商店来管理我的 Vuex 应用程序的事件.到目前为止，我有以下内容.
从vue"导入Vue；从vuex"导入 Vuex；Vue.use(Vuex);const state = { dataRows: [], activeDataRow: {} };常量突变 = {UPDATE_DATA(state, data) { state.dataRows = data;state.activeDataRow = {};},};导出默认新 Vuex.Store({ state, mutations });我将有许多列表项，当单击这些项时，它们应该会更改存储中数据的值.根组件App和菜单栏Navigation的设计如下(最后会有一堆action所以我把它们收集在文件中actions.js).
<div id="应用程序"><导航></导航></模板><脚本>从./navigation.vue"导入导航导出默认{组件:{导航}}<模板><div id="导航栏"><ul><li onclick="console.log('Clickaroo...');">Plain JS</li><li @click="updateData">Action Vuex</li>
</模板><脚本>从 "../vuex_app/actions" 导入 { updateData };导出默认{Vuex:{吸气剂:{ activeDataRow:状态 =>state.activeDataRow },动作:{更新数据}}}
单击第一个列表项会在控制台中显示输出.但是，当单击第二个时，什么也没有发生，所以我很确定根本没有调度该事件.呈现页面时，我还看到以下错误:
<块引用>属性或方法updateData"未在实例上定义，但在渲染期间被引用.确保在 data 选项中声明响应式数据属性.
我对 Vuex 很陌生，所以我只是猜测.我是否需要引用 store 中的 updateData 操作以及 state 和 mutations?我怎么做?错误消息谈到的数据选项"是什么/在哪里?不是我的组件状态和属性吗?
为什么会出错
您收到错误消息，因为当模板中有 <li @click="updateData"> 时，它会在模板中查找方法 updateData找不到 vue 组件，因此会引发错误.要解决这个问题，需要在 vue 组件中添加相应的方法，如下所示:
this.$store.dispatch("updateData") 正在做的是按照文档这里.
什么是数据选项"
您没有定义任何数据属性，可以使用 vue 组件的数据属性，如果您只想在该组件中使用它.如果您有需要跨多个组件访问的数据，您可以使用 vuex state正如我相信你在做的那样.
以下是为 vue 组件设置数据属性的方法:
您可以在视图中使用这些数据属性，并基于它计算属性，或在其上创建 watchers 和许多 更多.
I'm trying to design a store to manage the events of my Vuex application. This far, I have the following.
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { dataRows: [], activeDataRow: {} };
const mutations = {
UPDATE_DATA(state, data) { state.dataRows = data; state.activeDataRow = {}; },
};
export default new Vuex.Store({ state, mutations });
I'm going to have a number of list items that are supposed to change the value of the data in the store when clicked. The design of the root component App and the menu bar Navigation is as follows (there will be a bunch of actions in the end so I've collected them in the file actions.js).
<template>
<div id="app">
<navigation></navigation>
</div>
</template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>
<template>
<div id="nav-bar">
<ul>
<li onclick="console.log('Clickaroo... ');">Plain JS</li>
<li @click="updateData">Action Vuex</li>
</ul>
</div>
</template>
<script>
import { updateData } from "../vuex_app/actions";
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData }
}
}
</script>
Clicking on the first list item shows the output in the console. However, when clicking on the second one, there's nothing happening, so I'm pretty sure that the event isn't dispatched at all. I also see following error when the page's being rendered:
Property or method "updateData" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
I'm very new to Vuex so I'm only speculating. Do I need to put in reference to the updateData action in the store, alongside with state and mutations? How do I do that? What/where's the "data option" that the error message talks about? Isn't it my components state and it's properties?
Why the error
You are getting the error, because when you have <li @click="updateData"> in the template, it looks for a method updateData in the vue component which it does not find, so it throws the error. To resolve this, you need to add corresponding methods in the vue component like following:
<script>
import { updateData } from "../vuex_app/actions";
export default {
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData }
},
methods:{
updateData: () => this.$store.dispatch("updateData")
}
}
</script>
What this.$store.dispatch("updateData") is doing is calling your vuex actions as documented here.
What/where's the "data option"
You don't have any data properties defined, data properties for a vue component can be used, if you want to use that only in that component. If you have data which needs to be accessed across multiple components, you can use vuex state as I believe you are doing.
Following is the way to have data properties for a vue component:
<script>
import { updateData } from "../vuex_app/actions";
export default {
date: {
return {
data1 : 'data 1',
data2 : {
nesteddata: 'data 2'
}
}
}
vuex: {
getters: { activeDataRow: state => state.activeDataRow },
actions: { updateData }
},
methods:{
updateData: () => this.$store.dispatch("updateData")
}
}
</script>
You can use these data properties in the views, have computed properies based on it, or create watchers on it and many more.
这篇关于如何在 Vuex 中设计一个 store 来处理嵌套的自定义组件中的点击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
