Vue.js 使用Vuex连接许多新的Vue

几个月来，我一直在Asp.net的一个项目中工作，试图慢慢地将前端从razor替换为Vue。目前，我有一个问题，我想在页面和部分组件之间进行通信。它们位于不同的文件中，因此我最好的方式是通过Vuex与它们对话。我只使用过几次Vuex，但非常喜欢它的功能

我的问题是，我在当前应用程序中创建的每个页面都被分解为自己的新Vue，而不是将应用程序包含在一个Vue应用程序中（之所以这样做是因为我正在缓慢地从razor迁移到Vue，我希望最终将所有内容都包含在一个Vue前端）

我有没有办法在两个单独的Vue micro应用程序之间调用Vuex

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

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

---

我在上面尝试了此方法，但不起作用，是否有人可以向我解释我缺少了什么或这是否可能？

您必须将

存储添加到每个Vue实例：


新Vue({
el:“#appOne”，
store，//添加了这一行
方法：{

以及：


新Vue({
el:“#appTwo”，
store，//添加了这一行
计算：{

注意：在实例声明的末尾也有语法问题：
）}
应该是
}

演示：


const store=新的Vuex.store({
声明：{
计数：0
},
突变：{
增量：state=>state.count++，
减量：state=>state.count--
}
})
新Vue({
el:“#appOne”，
商店，
方法：{
增量（）{
store.commit（'increment'）
},
减量{
store.commit（‘减量’）
}
}
})
新Vue({
el:“#appTwo”，
计算：{
计数（）{
返回store.state.count
}
},
})

appOne:{{$store.state.count}

增量
减量

appTwo:{{count}}

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


新Vue({
el:“#appOne”，
store，//添加了这一行
方法：{

以及：


新Vue({
el:“#appTwo”，
store，//添加了这一行
计算：{

注意：在实例声明的末尾也有语法问题：
）}
应该是
}

演示：


const store=新的Vuex.store({
声明：{
计数：0
},
突变：{
增量：state=>state.count++，
减量：state=>state.count--
}
})
新Vue({
el:“#appOne”，
商店，
方法：{
增量（）{
store.commit（'increment'）
},
减量{
store.commit（‘减量’）
}
}
})
新Vue({
el:“#appTwo”，
计算：{
计数（）{
返回store.state.count
}
},
})

appOne:{{$store.state.count}

增量
减量

appTwo:{{count}}

您提到您的组件位于不同的文件中，因此似乎在不同的页面中有不同的应用程序。
vuex
存储区不执行任何“魔术”在引擎盖下，它不会自动保持/重新加载状态，当浏览器加载新页面时，旧的javascript上下文将丢失。
vuex
设计用于SPA应用程序的上下文

如果要使其跨多个页面工作，必须显式地持久化并重新加载
vuex
存储，例如使用远程API或本地存储

对于您的简单示例，LocalStorage将非常适合您。您可以自己做，也可以使用vuex插件，如。
例如，使用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实例中）
您提到您的组件位于不同的文件中，因此似乎在不同的页面中有不同的应用程序。
vuex
存储不会执行任何“魔法”在引擎盖下，它不会自动保持/重新加载状态，当浏览器加载新页面时，旧的javascript上下文将丢失。
vuex
设计用于SPA应用程序的上下文

如果要使其跨多个页面工作，必须显式地持久化并重新加载
vuex
存储，例如使用远程API或本地存储

对于您的简单示例，LocalStorage将非常适合您。您可以自己做，也可以使用vuex插件，如。
例如，使用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实例中）
我在一个页面上遇到了一些奇怪的问题，因为只有一个存储和多个Vue实例，一些实例的计算方法（具有存储状态）没有更新

在过去的8个小时里，我试图找出问题所在，我去掉了项目中所有的主要依赖项，但仍然一无所获

原来应用程序是用
rollup
构建的，并且包含了所有依赖项（包括Vue/Vuex）。因此，我生成的每个js都有一个Vue/Vuex方法的副本

如果您认为您已经用尽了所有选项，那么您不会损失任何东西，确保简单hello world的结果javascript在2-5KB（使用外部vue依赖项）范围内，而不是50-70KB（在我的情况下）

我不得不把这个答案放在这里，希望我能帮助别人。
我在一个页面上遇到了一些奇怪的问题，因为只有一个存储和多个vue实例，一些实例的计算方法（带有存储状态）没有被更新

在过去的8个小时里，我试图找出问题所在，我去掉了项目中所有的主要依赖项，但仍然一无所获

原来应用程序是用
rollup
构建的，并且包含了所有依赖项（包括Vue/Vuex）。因此，我生成的每个js都有一个Vue/Vuex方法的副本

如果您认为您已经用尽了所有选项，那么您不会损失任何东西，确保生成的javascript
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()]
})