vue.js导入的模块在promise回调中未定义

我在vue.js应用程序中使用了一个简单的类似于存储的实现。我对商店的定义如下：

     // File: my_store.js
     var invoiceDetailStore = {

        state: {
           selectedInvoiceId: null,
           selectedInvoiceDetails: {}
        },

        setSelectedInvoiceId(selectedId, comp) {
           console.log('selectedInvoiceId updated by ' + comp + ' with value ' + selectedId);
           this.state.selectedInvoiceId = selectedId;
        },

        setSelectedInvoiceDetails: (invoiceDetails, comp) => {
           console.log('selectedInvoiceDetails updated by ' + comp + ' with value ' + invoiceDetails);
           this.selectedInvoiceDetails = invoiceDetails;
        },

        addSelectedInvoiceDetail: (invoiceDetail, comp) => {
           console.log('InvoiceDetail added by ' + comp + ' with value ' + invoiceDetail);
           this.selectedInvoiceDetails.push(invoiceDetail);
        }
     };

     export { invoiceDetailStore };

 // mycomponent.vue
 import { invoiceDetailStore } from '../Shared_State/invoice_detail_store.js';

 export default {
 data() {
     return {
        shared: invoiceDetailStore.state,
        selectedInvoice: {},
     };
  },

  mounted: function() {
     console.log(invoiceDetailStore);   // This prints the store properties and functions....
  },
  watch: {
     selectedInvoiceId: function(newValue, oldValue) {
        console.log(invoiceDetailStore);    // THIS prints undefined
        if(newValue !== oldValue) {
           axios('my/get/url')
           .then(response => {
              this.selectedInvoice = response.data.invoice_summary; // it sets the local data property called selectedInvoice 
              invoiceDetailStore.setSelectedInvoiceDetails(response.data.invoice_details);   // .......... invoiceDetailStore is undefined
           })
           .catch(errorResponse => {
             // error actions here
           });
        }
     }
  },
}

在我的组件中，我导入了存储。当组件中监视的属性发生更改时，我会调用axios，然后尝试在axios的成功回调中调用存储上的方法，如下所示：

     // File: my_store.js
     var invoiceDetailStore = {

        state: {
           selectedInvoiceId: null,
           selectedInvoiceDetails: {}
        },

        setSelectedInvoiceId(selectedId, comp) {
           console.log('selectedInvoiceId updated by ' + comp + ' with value ' + selectedId);
           this.state.selectedInvoiceId = selectedId;
        },

        setSelectedInvoiceDetails: (invoiceDetails, comp) => {
           console.log('selectedInvoiceDetails updated by ' + comp + ' with value ' + invoiceDetails);
           this.selectedInvoiceDetails = invoiceDetails;
        },

        addSelectedInvoiceDetail: (invoiceDetail, comp) => {
           console.log('InvoiceDetail added by ' + comp + ' with value ' + invoiceDetail);
           this.selectedInvoiceDetails.push(invoiceDetail);
        }
     };

     export { invoiceDetailStore };

 // mycomponent.vue
 import { invoiceDetailStore } from '../Shared_State/invoice_detail_store.js';

 export default {
 data() {
     return {
        shared: invoiceDetailStore.state,
        selectedInvoice: {},
     };
  },

  mounted: function() {
     console.log(invoiceDetailStore);   // This prints the store properties and functions....
  },
  watch: {
     selectedInvoiceId: function(newValue, oldValue) {
        console.log(invoiceDetailStore);    // THIS prints undefined
        if(newValue !== oldValue) {
           axios('my/get/url')
           .then(response => {
              this.selectedInvoice = response.data.invoice_summary; // it sets the local data property called selectedInvoice 
              invoiceDetailStore.setSelectedInvoiceDetails(response.data.invoice_details);   // .......... invoiceDetailStore is undefined
           })
           .catch(errorResponse => {
             // error actions here
           });
        }
     }
  },
}

从注释中可以看出，我无法读取未定义的属性“SetSelectedVoiceDetails”。但是，

invoiceDetailStore

在安装的钩子中不是未定义的

谁能给我指一下正确的方向吗

---

谢谢

您不应该将存储导入单个组件

Vuex提供了一种将存储“注入”到所有子系统的机制 具有存储选项的根组件中的组件（由 Vue.use（Vuex））

因此，只有在创建根vue实例并将其传递给构造函数时，才能导入存储。下面是文档中的一个示例

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
  components: { Counter },
  template: `
    <div class="app">
       <counter></counter>
    </div>
  `
});

Vue.use(Vuex)

const-app=新的Vue({
el:“#应用程序”，
//使用“存储”选项提供存储。
//这将把store实例注入所有子组件。
商店，
组件：{Counter}，
模板：`
`
});
Vue.use（Vuex）

通过向根实例提供store选项，该存储将被注入根实例的所有子组件中，并作为此。$store在这些子组件上可用

---

还要注意，

function（）{}

和

（）=>{}

之间存在差异。第一个将创建自己的作用域，而后一个将使用其父作用域。Vue中与作用域上未定义的变量或未定义的

this

关键字相关的许多问题都与此相关，可以通过使用

（）=>{}

解决。您不应该将存储导入单个组件

Vuex提供了一种将存储“注入”到所有子系统的机制 具有存储选项的根组件中的组件（由 Vue.use（Vuex））

因此，只有在创建根vue实例并将其传递给构造函数时，才能导入存储。下面是文档中的一个示例

const app = new Vue({
  el: '#app',
  // provide the store using the "store" option.
  // this will inject the store instance to all child components.
  store,
  components: { Counter },
  template: `
    <div class="app">
       <counter></counter>
    </div>
  `
});

Vue.use(Vuex)

const-app=新的Vue({
el:“#应用程序”，
//使用“存储”选项提供存储。
//这将把store实例注入所有子组件。
商店，
组件：{Counter}，
模板：`
`
});
Vue.use（Vuex）

通过向根实例提供store选项，该存储将被注入根实例的所有子组件中，并作为此。$store在这些子组件上可用

---

还要注意，

function（）{}

和

（）=>{}

之间存在差异。第一个将创建自己的作用域，而后一个将使用其父作用域。Vue中与作用域上未定义变量或未定义的

this

关键字相关的许多问题都与此相关，可以根据要求使用

（）=>{}

来解决，以下是我的评论作为答案。我强调，虽然这确实修复了代码中的重要错误，但我看不出有任何理由可以解决问题中发布的特定错误消息

您的“商店”中有以下几个功能：

     // File: my_store.js
     var invoiceDetailStore = {

        state: {
           selectedInvoiceId: null,
           selectedInvoiceDetails: {}
        },

        setSelectedInvoiceId(selectedId, comp) {
           console.log('selectedInvoiceId updated by ' + comp + ' with value ' + selectedId);
           this.state.selectedInvoiceId = selectedId;
        },

        setSelectedInvoiceDetails: (invoiceDetails, comp) => {
           console.log('selectedInvoiceDetails updated by ' + comp + ' with value ' + invoiceDetails);
           this.selectedInvoiceDetails = invoiceDetails;
        },

        addSelectedInvoiceDetail: (invoiceDetail, comp) => {
           console.log('InvoiceDetail added by ' + comp + ' with value ' + invoiceDetail);
           this.selectedInvoiceDetails.push(invoiceDetail);
        }
     };

     export { invoiceDetailStore };

 // mycomponent.vue
 import { invoiceDetailStore } from '../Shared_State/invoice_detail_store.js';

 export default {
 data() {
     return {
        shared: invoiceDetailStore.state,
        selectedInvoice: {},
     };
  },

  mounted: function() {
     console.log(invoiceDetailStore);   // This prints the store properties and functions....
  },
  watch: {
     selectedInvoiceId: function(newValue, oldValue) {
        console.log(invoiceDetailStore);    // THIS prints undefined
        if(newValue !== oldValue) {
           axios('my/get/url')
           .then(response => {
              this.selectedInvoice = response.data.invoice_summary; // it sets the local data property called selectedInvoice 
              invoiceDetailStore.setSelectedInvoiceDetails(response.data.invoice_details);   // .......... invoiceDetailStore is undefined
           })
           .catch(errorResponse => {
             // error actions here
           });
        }
     }
  },
}

setSelectedVoiceDetails:（发票详细信息，公司）=>{
log（'selectedVoiceDetails由'+comp+'更新，值为'+invoiceDetails'）；
this.selectedInvoiceDetails=invoiceDetails；
},

由于这是使用箭头函数，它将使用错误的

此值。此外，它不会通过
状态访问
所选的VoiceDetails
。我认为应该改为：

setSelectedVoiceDetails（发票详细信息，公司）{
log（'selectedVoiceDetails由'+comp+'更新，值为'+invoiceDetails'）；
this.state.selectedInvoiceDetails=invoiceDetails；
},

我建议进一步调查，以确定这似乎可以解决问题的原因。例如，可能是您使用的是缓存版本的代码，而上面的更改只是刷新了缓存。
根据要求，以下是我的评论作为答案。我强调，虽然这确实修复了代码中的重要错误，但我看不出有任何理由可以解决问题中发布的特定错误消息

您的“商店”中有以下几个功能：

     // File: my_store.js
     var invoiceDetailStore = {

        state: {
           selectedInvoiceId: null,
           selectedInvoiceDetails: {}
        },

        setSelectedInvoiceId(selectedId, comp) {
           console.log('selectedInvoiceId updated by ' + comp + ' with value ' + selectedId);
           this.state.selectedInvoiceId = selectedId;
        },

        setSelectedInvoiceDetails: (invoiceDetails, comp) => {
           console.log('selectedInvoiceDetails updated by ' + comp + ' with value ' + invoiceDetails);
           this.selectedInvoiceDetails = invoiceDetails;
        },

        addSelectedInvoiceDetail: (invoiceDetail, comp) => {
           console.log('InvoiceDetail added by ' + comp + ' with value ' + invoiceDetail);
           this.selectedInvoiceDetails.push(invoiceDetail);
        }
     };

     export { invoiceDetailStore };

 // mycomponent.vue
 import { invoiceDetailStore } from '../Shared_State/invoice_detail_store.js';

 export default {
 data() {
     return {
        shared: invoiceDetailStore.state,
        selectedInvoice: {},
     };
  },

  mounted: function() {
     console.log(invoiceDetailStore);   // This prints the store properties and functions....
  },
  watch: {
     selectedInvoiceId: function(newValue, oldValue) {
        console.log(invoiceDetailStore);    // THIS prints undefined
        if(newValue !== oldValue) {
           axios('my/get/url')
           .then(response => {
              this.selectedInvoice = response.data.invoice_summary; // it sets the local data property called selectedInvoice 
              invoiceDetailStore.setSelectedInvoiceDetails(response.data.invoice_details);   // .......... invoiceDetailStore is undefined
           })
           .catch(errorResponse => {
             // error actions here
           });
        }
     }
  },
}

setSelectedVoiceDetails:（发票详细信息，公司）=>{
log（'selectedVoiceDetails由'+comp+'更新，值为'+invoiceDetails'）；
this.selectedInvoiceDetails=invoiceDetails；
},

由于这是使用箭头函数，它将使用错误的
此值。此外，它不会通过
状态访问
所选的VoiceDetails
。我认为应该改为：

setSelectedVoiceDetails（发票详细信息，公司）{
log（'selectedVoiceDetails由'+comp+'更新，值为'+invoiceDetails'）；
this.state.selectedInvoiceDetails=invoiceDetails；
},

我建议进一步调查，以确定这似乎可以解决问题的原因。例如，可能是您使用的是缓存版本的代码，而上面的更改只是清除了缓存。
存储实现中存在各种错误，但不会导致此错误。箭头函数不应该是箭头函数，这样会给出错误的
此值。它似乎也忘记了在大约一半的时候使用
状态。您确定您正确解释了日志记录吗？您如何确切地知道哪条日志线可以从哪里开始？e、 g.尝试记录
console.log（'mounted'，invoiceDetailStore）
这样您就可以确定哪一行来自
挂载的
钩子。刚才我的问题上还有一条评论说商店中的箭头功能是问题所在，正如您所指出的。我更改了
stor中的所有箭头函数