Question

我一直在Asp.net的一个项目上工作了几个月，并试图慢慢地将剃刀的前端替换为Vue。目前，我有一个问题，我想在页面和部分组件之间进行通信。它们位于不同的文件中，因此我与他们交谈的最佳选择似乎是通过Vuex。我只使用了几次Vuex，但真的很喜欢它。

我的问题是，我在当前应用程序中创建的每个页面都被分解为自己的新Vue而不是将应用程序包含到一个Vue应用程序中（这样做是因为我正在慢慢地从剃刀移动到Vue，我希望最终体现在一个Vue前端的一切）

我有什么方法可以在两个独立的Vue微应用程序之间调用Vuex吗？

<script src="~/Scripts/store.js"></script>

<script>
  new Vue({
    el: '#appOne',
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})
</script>

以上是触发Vuex事件的初始应用程序。然后在下面的组件中，更改将在前端呈现。

<script src="~/Scripts/store.js"></script>

<script>
  new Vue({
    el: '#appTwo',
    computed: {
      count () {
        return store.state.count
      }
    },
  })
</script>

以下是将在这两个组件之间实现的基本Vuex存储。我将Vue和Vuex导入到我的应用标题中。

### store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})

我尝试过上面的这种方法，但它无法正常工作，有人可以向我解释我错过了什么，或者这是否可能？

Answer 1

您必须将store添加到每个Vue实例：

<script>
  new Vue({
    el: '#appOne',
    store,             // added this line
    methods: {

和

<script>
  new Vue({
    el: '#appTwo',
    store,             // added this line
    computed: {

注意：在实例声明结束时您也遇到了语法问题：)} </script>应为}) </script>。

演示：

＆＃13;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  }
})


new Vue({
  el: '#appOne',
  store,
  methods: {
    increment () {
      store.commit('increment')
    },
    decrement () {
        store.commit('decrement')
    }
  }
})

new Vue({
  el: '#appTwo',
  computed: {
    count () {
      return store.state.count
    }
  },
})

＆＃13;

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="appOne">
  <p>appOne: {{ $store.state.count }}</p>
  <button @click="increment">increment</button>
  <button @click="decrement">decrement</button>
</div>
<hr>
<div id="appTwo">
  <p>appTwo: {{ count }}</p>
</div>

＆＃13;

Answer 2

您提到您将组件放在单独的文件中，因此您似乎在单独的页面中有单独的应用程序。 vuex商店没有执行任何“魔法”＃34;在引擎盖下，它不会自动持久/重新加载状态，当浏览器加载新页面时，旧的javascript上下文将丢失。 vuex旨在在SPA应用程序的上下文中工作。

如果要使其跨多个页面工作，则必须显式保留并重新加载vuex商店，例如使用远程API或localStorage。

LocalStorage在您的简单示例中非常适合。您可以自己动手或使用vuex插件，例如vuex-persistedstate，vuex-persist，vuex-localstorage。例如，使用vuex-persistedstate：

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment: state => state.count++,
    decrement: state => state.count--
  },
  plugins: [createPersistedState()]
})

（并记住将商店添加到您的Vue实例中）

Answer 3

我在页面上遇到了一些奇怪的问题，即只有一个商店和许多 vue 实例，有些实例具有未更新的计算方法（带有商店状态）。

我在过去 8 小时内试图找出问题所在，我删除了项目的所有主要依赖项，但仍然没有。

结果表明应用是使用 rollup 构建的，并且包含所有依赖项（包括 Vue/Vuex）。所以我生成的每个 js 都有一份 Vue/Vuex 方法的副本。

如果你认为你已经用尽了所有的选择，你不会失去任何东西，确保一个简单的 hello world 的结果 javascript 在 2-5KB 的范围内（使用外部 vue 依赖项）而不是 50-70KB（就我而言）。

我不得不把这个答案放在这里希望我能帮助别人。

使用Vuex连接许多新的Vue

3 个答案: