Vue.js - 没有 Webpack 的 Vuex？答案

【问题标题】：Vue.js - Vuex without Webpack?Vue.js - 没有 Webpack 的 Vuex？
【发布时间】：2017-06-06 12:15:12
【问题描述】：

我正在使用 ASP.Net Web Pages (vb Razor)，并且在使用它设置 Webpack 时遇到了麻烦，并且在 stackoverflow (How to setup ASP.NET Core + Vue.Js?) 的其他地方被建议在没有构建系统的情况下简单地使用 vue.js CDN .

问题是：现在能够使用 Vuex 进行状态管理会很棒，但似乎所有示例都使用 webpack - 无论如何，如果没有构建系统或 vuex 的替代品来创建数据存储和维护 vue反应性？

谢谢，很抱歉这个不常见的问题 - 我知道大多数人都使用 webpack！

【问题讨论】：

NOT 使用 webpack 应该没有问题。也许问题出在export 和import 部分。到目前为止，您尝试过什么？
谢谢哈利！我一直在使用 ASP.Net javascript bundler 来捆绑所有的 javascript 库，但似乎问题是 asp.net 没有保持您设置的顺序 (stackoverflow.com/questions/19323409/…)。看起来好像需要 webpack，但结果却是与 ASP.Net 的细微差别。感谢您提供帮助！非常感激！您知道如何设置链接中的函数，但用 VB 编写，用于 ASP.Net Razor 网页吗？

标签： javascript vuejs2 vuex

【解决方案1】：

如果没有包构建器，您可以使用 vuejs 和 vuex 的 CDN 库。只需在 vuejs cdn 之后包含 vuex cdn，因为 vuex 旨在检测 Vue 并自动安装自身。

你可以在这里看到一个 jsfiddle example

<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
  </head>
  <body>
    <div id="app">
      <div>{{ $store.state.count }}</div>
      <button v-on:click="buttonClick">Click Me</button>
    </div>
    <script type="text/javascript">
      new Vue(
        {
          'el': '#app',
          'store': new Vuex.Store(
            {
              state: {
                count: 0
              },
              mutations: {
                increment (state) {
                  state.count++
                }
              }
            }
          ),
          'methods': {
            'buttonClick': function() {
              this.$store.commit('increment')
            }
          }
        }
      )
    </script>
  </body>
</html>

【讨论】：

如果我希望商店位于单独的文件中，我该如何实现？
@naoru 只需将其放在 .js 文件中，类似于 const vuex_store = new Vuex.Store(...) 的行，然后在主脚本标签中您将拥有 'store': vuex_store