使用 Vuex 设置 Vue.js

Posted 2023-03-27

技术标签:

【中文标题】使用 Vuex 设置 Vue.js【英文标题】：Setting up Vue.js with Vuex 【发布时间】：2019-04-16 13:27:23 【问题描述】：

我正在尝试将 vue 与 vuex 结合起来。但是有一个错误，我无法将我的main.js 和我的app const 链接到我的 index.html。

我的设置是：

main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from 'routes.js'
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter)
Vue.config.productionTip = false

const router = new VueRouter(
  routes // short for `routes: routes`
)

new Vue( // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

routes.js：

import HelloWorld from './components/HelloWorld.vue'

export const routes = [
  
    path: '/',
    component: HelloWorld,
    name: 'Hello'
  
]

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-example</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-example doesn't work properly without javascript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <router-link :to=" name: 'Hello' ">Home</router-link>
      <router-view></router-view>
    </div>
  </body>
</html>

<script src="./src/main.js"></script>

我的新错误：

【问题讨论】：

这是一个 eslint 错误，要修复它添加这个window.vue_app=app; @BoussadjraBrahim 放入什么文件？ main.js? 是的，在最后 【参考方案1】：

对于原始问题

正如评论中所说，这是一个eslint 错误。您很可能使用 vue-cli 设置您的项目，默认情况下，它会为您的项目提供 eslint 配置。 Eslint is a tool 检查您的代码以防止出现某种错误。

在你的情况下，main.js，你正在做：

const app = new Vue(
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

当您对 app 变量进行赋值时，但您不对该变量执行任何操作。 Eslint 抱怨这一点 - 因为，嗯，未使用的变量通常是由于人为错误，而且是一个错误 -。

你可以跳过变量赋值，然后：

new Vue(
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

没有 app 变量。

或者你可以在前一行添加注释，比如：

// eslint-disable-next-line no-unused-vars
new Vue(
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

据我所知，您的问题与 vuex 无关。

另外，如果您真的想在应用程序的任何其他部分使用app，只需添加：

export default app 在main.js 文件的末尾。这也将修复此错误，因为现在您实际上是在使用 app 变量进行操作。

一些提示：

您可以设置任何编辑器来使用 eslint。所以当你违反一些 eslint 规则时，编辑器本身（比如 vscode）会给你视觉反馈。如果您愿意，还将设置 cmets 以忽略特定行中的 eslint 规则。

您可以配置 eslint 行为by adding an .eslintrc configuration file to your project。在您的特定情况下，我认为 eslint 禁止您编译该代码是一件好事（未使用的变量充其量是误导性的），但有时您可能不想遵循一些 eslint 规则，具体取决于您的代码风格和许多考虑因素。

问题版

现在您已经修复了之前的 eslint 错误，您将获得一个新错误： do not use new for side effects

同样，这条 eslint 规则通常是有道理的：new 调用旨在返回一个对象，因此从技术上讲，您不应在未将结果分配给变量的情况下使用 new。

但是，Vue api 确实是这样做的，所以这次你需要忽略 eslint：

// eslint-disable-next-line no-new
new Vue(
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

这应该可以解决问题。要了解如何使用 cmets 禁用特定的 eslint 规则，this answer helps a lot。

【讨论】：

谢谢，我已经实现了你的解释，但是我得到一个新的错误，请检查上面的代码！谢谢！现在错误消失了，但是不知何故我的 index.html 没有用 vue 组件更新.. routerview 似乎没有收到任何东西.. 那么，您在浏览器控制台中看到了哪些错误？你在使用 vue 开发工具吗？ github.com/vuejs/vue-devtools @Sergeon 我正在使用 chrome 插件，所以我可以看到它，但是它说 Vue 甚至没有为 index.html 页面启用。你是如何启动页面的？用npm run dev 什么的？我相信您在第一次配置项目时只是搞砸了一些东西，也许试图解决eslint 问题，现在它甚至无法编译。如果您在终端上尝试“npm run lint”或“npm run build”命令，输出是什么？【参考方案2】：

这是一个 eslint rule 。它可以防止您创建从未使用过的变量。要为此特定行禁用此规则，只需编写：

const app = new Vue( // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: 
    HelloWorld
  
)

要为您的整个项目禁用此规则，只需在您的主项目目录中创建一个名为 .eslintrc.js 的文件（如果它不存在）

module.exports = 
  rules: 
  'no-unused-vars': 0 //or false,

或者你只是不将你的 vue 实例分配给一个变量：

new Vue(
      el: '#app',
      router,
      components: 
        HelloWorld
     
)

【讨论】：

谢谢，但是我的 index.html 怎么知道我想使用 const app。因为div id="app"和vue之间的链接不见了..？我的 helloworld.vue 永远不会显示在 index.html 上链接没有丢失。在您的 main.js 文件中，您定义了您的 vue 实例 - el: #app 将您的 vue 链接到 html 那它怎么不行呢？ <script 标签是否未正确链接 main.js 文件？

以上是关于使用 Vuex 设置 Vue.js的主要内容，如果未能解决你的问题，请参考以下文章

使用 Vuex 在 Vue.js 中的计算属性上未从观察者更新数据变量

使用 Vuex + Vue.js 构建单页应用

Vue.js中学习使用Vuex详解

带有 vuex-oidc 的 Vue.js SPA 在发布版本上有重定向循环

vue.js的状态管理vuex中store的使用