组件以及它们如何在Vue和Vuex中进行交互

讨论组件之间如何大规模共享数据，以及使用Vue / Vuex应用程序的示例代码。

Vue作为一个渐进式框架，在语法方面与Angular相似。为了理解Vue中的组件以及Vuex的用途，首先，我们将介绍Vue如何提供在组件之间共享数据的能力。

什么是组件？为什么我们需要在组件之间共享数据？如果您熟悉Angular指令，那么它就像一个简单的指令，我们可以编写自己的逻辑，提供模板（模板），并调用该组件（而不是将组件注册到根实例）。

示例：

//Button directive componentVue.component('button-directive', {data: function () {return {counterValue: 0}}template: '<span>-Button Counter-</span><button v-on:click="counterValue++">{{ count }}</button>'});<div id="directive"><button-directive></button-directive></div>在上面的例子中，button-directive 是一个包含增加按钮计数器值的逻辑的组件，以及将实际呈现按钮的模板。这些组件可以在顶层声明时与其他组件共享。要了解更多关于组件的信息，请访问 Vue的组件 文档。

上面的例子显示了一个单独的组件，但是如果有多个组件与父组件和子组件共享相同的实例？使用各种技术在组件（子组件和父组件）之间共享。

1. 道具和事件道具允许您将任何数据类型传递给子组件，并允许您控制组件接收的数据类型。这允许子组件在父数据更改时进行更新。欲了解更多信息，请访问 Vue的道具 文档。事件是将更新信息从子组件传递到父组件的一种方法。事件提供了一种方法来通知您的父母组件有关儿童的变化。

例：

<my-component @eventExample="parentHandler"></my-component>在这里，我的组件是一个子组件 eventExample ，它将触发任何更改（内部使用 - v-on:eventExample ）。

事件可以用类似的格式发起：

export default {methods: {fireEvent() {this.$emit('eventExample', eventValueOne);}}}道具和事件都可以与v-modal一起用于双向绑定，其中输入值的更改将调用该 triggerEvent 方法。

例：

<template><div><input type="text" :value="value" @input="triggerEvent"/></div></template><script>export default {props: {value: String},methods: {triggerEvent(event) {this.$emit('input', event.target.value);}}}</script>2. 提供/注入这允许从祖先组件到其所有后代选择性地展示数据或方法。虽然提供/注入本身并不具有反应性，但它可用于传递反应性对象。

示例：考虑两个组件和这两个组件共享。

const Provider = {provide: {foo: 'bar'},template: `<div><slot><slot></div>`}const Child = {inject: ['foo'],template: `<div>{{ foo }} injected. <slot><slot></div>`,}new Vue({el: '#app',components: {Child,Provider}})Vuex如何进入图片？如上所述，我们可以在两个组件之间共享实例，或者说，我们可以共享三个组件; 当一个组件在两个或三个组件之间共享时，问题就会出现，甚至更多。假设有一个大型应用程序，其中有数百个组件，一个组件有一个需要在另外50个组件之间共享的支持; 这不会成为维护该组件状态的问题吗？为了处理这个问题，Vuex维护状态，并且状态的任何变化都是使用变异来处理的，并且可以使用commit来调用变异。

简而言之，Vuex会主动更新从商店中读取数据的任何组件。

操作 - 状态接收到更改值以更改状态的位置。突变 - 实际状态发生变化的地方。考虑下面的例子。

注意：为了初始化商店，我创建了一个Vues.Store的新实例。

/* Store where the state is initialized and the values are mutated depending upon the values */var stateManager = new Vuex.Store {state: {state1: '', // Initialize the state1state2: '' // Initialize the state2}actions:{// API's can be called here and then accordingly can be passed for mutation},mutations: {changeStateOne(state, payload) {state.state1 += payload; // Recieved the payload from the action at the bottom},changeStateTwo(state, payload) {state.state2 += payload; // Recieved the payload from the action at the bottom.}}}// Component oneconst componentOne = {template: `<div class="componentOne">{{ stateManagerComponent }}</div>`,computed: {stateManagerComponent() {return {stateManager.state.state1stateManager.state.state2}}}}// Component Twoconst componentTwo = {template: `<div class="componentTwo">{{ stastateManagerComponentteManagerComponent }}</div>`,computed: {stateManagerComponent() {return {stateManager.state.state1stateManager.state.state2}}}}new Vue({el: '#app-container',components: {componentOne,componentTwo}methods: {increaseStatesValue() {stateManager.commit('changeStateOne', 1); // Action with value one that is sent to the storestateManager.commit('changeStateTwo', 2); // Action with value two that is sent to the store}}})// Thus resulting to a shared state between two components.<div id="app-container"><div class="componentOne">{{ stateManagerComponent }}</div><div class="componentTwo">{{ stateManagerComponent }}</div></div>在上面的例子中，我们看到两个部件共享彼此之间是相同的状态，其中部件彼此共享相同的状态，并且值获得在两个通过一个单一的存储组件（所附在上述例子情况下，它是 stateManager 这是一个国家的存储）。

注意在操作：在上面的例子中，TGE动作是 increaseStatesValue() 正在提供所述有效载荷的功能 changeStateOne 和 changeStateTwo 功能，在突变部分。

上面的Vuex例子可以被映射在下面的图中。

在架构方面，Vuex使用flux作为它的方法。要了解通量，请检查flux patterns的文档。

我希望这篇文章提供了一些关于为什么在Vue应用程序中使用Vuex以及它如何在两个组件之间提供顺畅通信并促进状态之间的值更改的容易性的一些想法。