With VueJS Cli how should do to have a variable common to all pages and be able to watch it in a page

huangapple go评论72阅读模式
英文:

With VueJS Cli how should do to have a variable common to all pages and be able to watch it in a page

问题

我相对不太熟悉VueJs,但根据您的描述,您想在所有页面之间共享一个变量(月份),并且当该变量更改时,希望在页面上执行某些操作。您通过使用Vue的事件总线(bus.js)以及$emit和$on方法来解决了这个问题。这是一个解决方案的示例:

在App.vue中:

<select name="selectMonth" v-model="month" id="selectMonth" required>
    <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
</select>

在Home.vue或任何其他页面中:

onChangeMonth () {
    bus.$emit('new-month', this.month)
},

在页面中监听变化:

created () {
    bus.$on('new-month', this.getExpenses)
},

这样,当在App.vue中选择一个新的月份时,会触发'new-month'事件,而在其他页面上可以监听该事件并执行相应的操作。

希望这对您有所帮助!

英文:

I'm relatively new to VueJs and I'm stuck on a project and I can't find a solution online.

I want to have a variable commun to all pages (month), and when that variable change I want to be able to do something on my page.

Example of what I want to do (simplified)

In App.vue

&lt;div id=&quot;app&quot;&gt;
    &lt;div id=&quot;topBar&quot;&gt;
      &lt;div id=&quot;nav&quot;&gt;
        &lt;div&gt;&lt;router-link to=&quot;/&quot;&gt;Home&lt;/router-link&gt;&lt;/div&gt;
        &lt;div&gt;&lt;router-link to=&quot;/expenses&quot;&gt;D&#233;penses&lt;/router-link&gt;&lt;/div&gt;
        &lt;div&gt;&lt;router-link to=&quot;/revenues&quot;&gt;Revenus&lt;/router-link&gt;&lt;/div&gt;
        &lt;div&gt;&lt;router-link to=&quot;/category&quot;&gt;Categories&lt;/router-link&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;select name=&quot;selectMonth&quot; v-model=&quot;month&quot; id=&quot;selectMonth&quot; required&gt;
        &lt;option v-for=&quot;(month, index) in months&quot; :key=&quot;index&quot; :value=month&gt;{{ month }}&lt;/option&gt;
    &lt;/select&gt;
    &lt;router-view/&gt;
  &lt;/div&gt;

In Home.vue or any other page

watch: {
    month: function () {
      this.getExpenses() // or something else (In this case I want to fetch data again with a new month)
    }
  },

But since the variable is changed on the app.vue, (no matter what page I'm on) I can't watch it on my page.

Do you know how I should do? What is the best practice for that kind of stuff?

Thanks in advance if someone can help me!

EDIT: SOLVED

State Management and $emit did the trick. While discovering Vuex I found out that my app didn't need such a big state manager so I've found another way (based on the same idea):

I've created a bus.js with an empty Vue instance:

import Vue from &#39;vue&#39;
const bus = new Vue()

export default bus

Then in my component I use

import bus from &#39;../bus&#39;

... 

onChangeMonth () {
      bus.$emit(&#39;new-month&#39;, this.month)
    },

And on my pages :

import bus from &#39;../bus&#39;

...

created () {
    bus.$on(&#39;new-month&#39;, this.getExpenses)
  },

答案1

得分: 0

Component-based UI frameworks like Vue、React,以及其他类似的框架,强制执行将数据传递到组件中(在Vue中称为Props),但不允许这些组件通过简单地更改数据来将更新传递回父组件。这样做的原因是为了性能;显式地进行数据更改使框架只在需要时重新渲染。

与更新传递给组件的Props不同,可以使用事件或使用状态管理器(如Vuex)将更新传递回上层。

如果您正在寻找实现此功能的简单方法,请查看$.emit:https://v2.vuejs.org/v2/api/#vm-emit

英文:

Component based UI frameworks like Vue, React, and friends enforce the idea of passing data down into components (Props in Vue) but not allowing those components to pass updates to that data up to parents by simply changing the data. The reason for this is performance; making data changes explicitly allows the framework to only re-render when it needs to.

Instead of updating props that have been passed into a component, updates can be passed up with events or by using a state manager like Vuex.

If you're looking for a simple way to achieve this, check out $.emit : https://v2.vuejs.org/v2/api/#vm-emit

huangapple
  • 本文由 发表于 2020年1月4日 00:42:26
  • 转载请务必保留本文链接:https://go.coder-hub.com/59582197.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定