未在实例上定义但在渲染期间引用的属性或方法 I Vuex

Posted 2023-02-23

【中文标题】未在实例上定义但在渲染期间引用的属性或方法 I Vuex

【英文标题】：Property or method not defined on the instance but referenced during render I Vuex

【发布时间】：2017-04-14 03:54:15

【问题描述】：

我收到以下错误。

[Vue 警告]：属性或方法“updateData”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

据我所知，该方法就在那里，所以由于我对 Vuex 的无知，我被困在了一些我想念的东西上。我用谷歌搜索了这件事并得到了很多答案，但没有一个让我更明智地做什么。我感觉这似乎是有范围的东西。

我也收到以下错误，但我怀疑两者的根本原因相同，因此解决一个将解决另一个。

[Vue 警告]：事件“点击”的无效处理程序：未定义 （在...的组件中找到）

标记如下。我已经检查了路径是否到达了正确的位置。目前我完全不确定如何开始对其进行故障排除。任何提示将不胜感激。

<template>
  <div id="nav-bar">
    <ul>
      <li @click="updateData">Update</li>
      <li @click="resetData">Reset</li>
    </ul>
  </div>
</template>

<script>
  import  updateData, resetData  from "../vuex_app/actions";

  export default 
    vuex: 
      getters:  activeDataRow: state => state.activeDataRow ,
      actions:  updateData, resetData 
    
  
</script>

编辑

输入后，我改进了导出以包含 methods 属性，如下所示。 （但仍然存在相同的错误。）

export default 
  vuex: 
    getters:  activeDataRow: state => state.activeDataRow , 
    actions:  updateData, resetData , 
    methods: 
      updateData: () => this.$store.dispatch("updateData"), 
      resetData: () => this.$store.dispatch("resetData")
    
  

我必须在商店里做一些额外的事情吗？看起来像这样。

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 = ; ,
    RESET_DATA(state)  state.dataRows = []; state.activeDataRow = ; 
;

export default new Vuex.Store( state, mutations );

【参考方案1】：

你必须在 Vue 组件的方法中添加导入的函数，如下所示。您可以按照documentation 中的说明向mapActions 寻求帮助。这是将this.updateDate 映射到this.$store.dispatch('updateDate') 所必需的。

<script>
  import  updateData, resetData  from "../vuex_app/actions";
  import  mapActions  from 'vuex'

   export default 
    vuex: 
      getters:  activeDataRow: state => state.activeDataRow ,
      actions:  updateData, resetData 
    ,
    methods: 
       ...mapActions(['updateData', 'resetData'])
    
  
</script>

已编辑

如果你不想使用mapActions，你可以像在你的例子中那样使用this.$store.dispatch，但是你需要有vue组件级别的方法（documentation）而不是insise vuex，如下：

export default 
  vuex: 
    getters:  activeDataRow: state => state.activeDataRow , 
    actions:  updateData, resetData 
  , 
  methods: 
    updateData: () => this.$store.dispatch("updateData"), 
    resetData: () => this.$store.dispatch("resetData")
  

【讨论】：

$store 的部分来自哪里？它是 Vue 的内部实用领域吗？我不认识其他上下文中的名称，在我看来它就像一个 jQuery 样式变量（几乎）...

@KonradViltersten this.$store 是这个 vue 组件的 vuex 存储，使用它你可以访问 vuex 存储或触发突变或调度操作。你可以看到它的例子使用了here。

我找到了，谢谢。问题是三个点（“...”）不起作用。我已经阅读了它，但目前，它有点松散的部分让我感觉不方便。我怎样才能重写方法：......与旧风格的 JS 分开？希望以后我会尝试弄清楚如何配置 webpack 以使用扩展运算符。

我解决了传播运营商问题，但原来的问题仍然存在。请随时查看编辑。

@KonradViltersten：在您的版本中，您已将 methods 嵌套在您的 vuex 对象中 - 它需要更高一层，就像在 saurabh 的示例中一样。