将另一个项目中的Vue组件与Vuex商店一起使用

时间:2019-09-05 14:34:28

标签: typescript vue.js vue-component vuex vue-cli

我正在为正在处理的项目使用Vue CLI和Typescript。该项目的一部分是,我将基本上拥有两个单独的网站,分别在两个不同的项目(项目A和项目B)中。

但是,项目A的某些功能应该在项目B中可用。因此,我认为,如果我只是从要尝试预览的项目A中导入Vue组件,那将很简单,而我正在使用它。部分原因是我将拥有一个Vuex模块,该模块代表两个项目存储区中同一位置的共享Project A数据的状态。

不幸的是,这是断裂的部分。由于某些原因,this.$store在项目B的内部使用时在项目A的内部未定义。我敢肯定,我可以通过使用更多的props或一些依赖项注入来解决这个问题,但是我真的更愿意我可以坚持使用常规Vuex。

为了证明我的情况,我在https://github.com/webMan1/ShareVueComponentsTest创建了一个简单的GitHub存储库。

我设置项目的步骤。

  1. 运行vue create multiproj(项目B)和vue create multiprojinner(项目A),并使用带有Vuex,Vue-router,babel,打字稿,pwa和eslint的预设。
  2. 在multiprojinner中,将composite: true添加到tsconfig.json。
  3. 在multiproj中,在tsconfig.json中添加multiprojinner作为参考。
  4. 在multiprojinner中创建一个显示“ this.$store.name”的简单“名称”组件
  5. 尝试在multiproj和multiprojinner中使用此组件。 this.$store在multiproj中未定义。

当然,如果我将名称传递为道具,则Name组件可以正常工作。

那么,是否有从其他Vue项目导入的组件中获得$ store的定义?

0 个答案:

没有答案