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中这样做？在角度，我只需要设置一个rootScope，但如何在vue中做到这一点？任何帮助将不胜感激。

Answer 1

这最终是Vuex进入Vue.js故事的地方。 Vuex是一个状态管理模式/库，如果您对此有所了解，则基于Flux / Redux架构模式：

Vuex是Vue.js应用程序的状态管理模式+库。它充当应用程序中所有组件的集中存储，其规则确保状态只能以可预测的方式进行变更。它还与Vue的官方devtools扩展集成，以提供零配置时间旅行调试和状态快照导出/导入等高级功能。

基本思想是你有一个集中的JavaScript对象（“商店”），它包含应用程序当前状态的所有数据。可以添加，删除或修改它的片段，具体取决于您的应用程序的要求，与服务器同步等。组件使用“getters”从中央存储订阅他们需要的数据，但也可以触发“操作”根据需要“改变”中央商店。但重点是一切都在奇异方向。在上面的示例中，更改将触发：

文本由用户
关于模糊（或点击保存按钮等），Container.vue会使用新文本触发updateText操作
updateText动作调用变异UPDATE_TEXT
UPDATE_TEXT更改商店以保留新值
App.vue和Container.vue正在使用mainText getter，它会注意到值的变化并相应地更新

[编辑] 此外，在第一次使用Flux架构模式时，可能会有点脑筋急转弯。 “行动”是你执行任何类型的AJAX-y善的地方，这就是为什么行动和突变之间的区别。操作负责与服务器交互（如果需要），而突变仅涉及应用程序的本地状态。即使您对应用程序状态的更改不需要与服务器进行交互，您仍然可以将其推送到Action - ＆gt;变异循环以保持整个应用程序的一致性。

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

1 个答案: