使用Vuex连接许多新的VUE

Question

我已经从事ASP.NET的项目工作了几个月，并试图慢慢将前端从剃须刀替换为Vue。目前，我有一个问题要在页面和部分组件之间进行交流。它们在单独的文件中，因此与他们交谈的最佳选择是通过Vuex。我只使用过Vuex几次，但真的很喜欢它。

我的问题是，我在当前应用程序中创建的每个页面都被分解为自己的新VUE，而不是将应用程序纳入一个VUE应用程序(这是因为我慢慢地从Razor到Vue，我希望最终在一个vue Frontend中体现一切(

我有什么办法可以在两个单独的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>。

演示：

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
    }
  },
})

<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>

Answer 2

您提到您的组件在单独的文件中，因此似乎您在单独的页面中具有单独的应用程序。vuex商店在引擎盖下没有执行任何"魔术"，它不会自动持久/重新加载状态，当浏览器加载新页面时，旧的JavaScript上下文就会丢失。vuex旨在在水疗应用程序的上下文中工作。

如果您想在多个页面上使其正常工作，则必须明确持久并重新加载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(以我为例(。

我必须在这里放这个答案，希望我可以帮助某人。