避免Phonegap应用程序中Vuex和IAP插件之间的冲突

Posted 2023-02-23

【中文标题】避免Phonegap应用程序中Vuex和IAP插件之间的冲突

【英文标题】：Avoid conflict between Vuex an IAP plugin in Phonegap app

【发布时间】：2020-07-25 21:01:16

【问题描述】：

在开发 Phonegap 应用时，我使用 Vuex 来管理应用的状态。所以，我在 App.vue：

// Import store
import store from './vuex/store'

稍后我想创建一个年度订阅，为此我使用 cordova-plugin-purchase 插件 (https://github.com/j3k0/cordova-plugin-purchase)，它导出一个名为“store”的全局对象。

因此，当我尝试使用此插件的“注册”方法时，我收到一条错误消息，提示 Vuex 没有“注册”方法：

store.register()

"TypeError: _vuex_store__WEBPACK_IMPORTED_MODULE_0__["default"].register 不是函数。"

如果这是为 Cordova 项目创建 IAP 的最新且可行的插件，我该如何避免这种冲突？

这是我的代码：

在 app.js：

// Init App
new Vue(
  el: '#app',
  template: '<app/>',

  // Register App Component
  components: 
    app: App
  
);

在 App.vue：

// Import store
    import store from './vuex/store'

    export default 
        store,
        data() 
            return ...

在 Login.vue：

if (response.data.result === 'OK') 

                            this.$store.dispatch('setUserID', response.data.user._id);
                            this.$store.dispatch('setUserEmail', response.data.user.email);
                            this.$store.dispatch('setUserName', response.data.user.name); ...

稍后在组件中设置 IAP：

<script>
import store from "../vuex/store";
...
mounted() 
    // Register the product
    store.register([ // being referred here to IAP global store object
      
        id: ...

我应该补充一点，我正在使用 Framework7 + Vue + Webpack

【问题讨论】：

你可以在导入 Vuex store 时使用任何你想要的名称。 import vuexstore from './vuex/store'

【参考方案1】：

试试这个：

import vuexstore from './vuex/store';

// Main
new Vue(
  store: vuexstore,
  render: h => h(App)
).$mount("#app");

像往常一样在组件中使用this.$store

你有理由在 IAP 组件中导入 Vuex 商店吗？不应该有，因为 vuex 可以通过 this.$store 访问。

尽量不要在该组件中导入 Vuex 存储，而是简单地记录另一个全局对象，但是你会使用它。现在，您似乎没有在任何地方导入或使用非 Vuex 商店。

【讨论】：

不幸的是，这又带来了第一个错误，关于 'register' 的那个不是函数...

嗯，这应该是不可能的。我们需要了解您如何在一个文件中导入和使用这两个商店并注册所有内容的详细信息

我认为我的错误是在组件中再次导入商店。我不知道我为什么这样做，但删除导入它似乎工作正常。感谢您的宝贵时间。