javascript - 如何更改根组件中的数据？

Question

所以我有一个使用 vue-cli 和路由的代码。

在我的 App.vue 中，我有一个如下所示的模板:

<template>
   <div id="app">
     {{Main}}
     <router-view></router-view>
   </div>
</template>
<script>
export default {
    name: 'app',
    data() {
      return: {
        Main: 'mainText'
      }
    }
</script>

在我的路线(.vue 文件)中，我有一个像这样的简单代码:

<template>
 <div class="container">
   <div>{{changeTheMainTextHere}}</div>
   <!--More codes here-->
 </div>
</template>

正如您在我的 .vue 文件中看到的，我有 {{changeTheMainTextHere}} ，我想要做的是动态附加或更改 {{Main}} 在我的根模板中。

我怎样才能在 vue 中做到这一点？在 Angular 中，我只需要设置 rootScope，但在 vue 中如何做到这一点？任何帮助将不胜感激。

Answer 1

这就是 Vuex 的最终所在进入 Vue.js 的故事。 Vuex 是一个基于 Flux/Redux 架构模式的状态管理模式/库(如果您对此有任何熟悉的话):

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue's official devtools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export / import.

基本思想是您有一个集中的 JavaScript 对象(“存储”)，它保存应用程序当前状态的所有数据。可以根据应用程序的要求添加、删除或修改它的各个部分，与服务器同步等。组件使用“getters”从中央存储订阅所需的数据，但也可以触发“actions”根据需要“改变”中央存储。但要点是，一切都沿着单一方向传播。在上面的示例中，更改将按如下方式触发:

1. 文本由用户更新
2. 模糊(或单击保存按钮等)时，Container.vue 使用新文本触发 updateText 操作
3. updateText 操作调用突变 UPDATE_TEXT
4. UPDATE_TEXT 更改存储以保存新值
5. App.vue 和 Container.vue 使用 mainText getter，它会注意到值的变化并进行相应更新

[编辑] 另外，当第一次接触 Flux 架构模式时，有一个问题可能有点令人费解。 “操作”是您执行任何 AJAX-y 功能的地方，这就是操作和突变之间存在区别的原因。操作负责与服务器交互(如果需要)，而突变仅涉及应用程序的本地状态。即使您对应用程序状态的更改不需要与服务器交互，您仍然可以通过操作 -> 变更循环来推送它，以保持整个应用程序的一致性。