Vuex,Vue.js状态管理器

Vuex是Vue.js的官方状态管理库。在本教程中,我将解释其基本用法。

Vuex简介

Vuex是Vue.js的官方状态管理库。

它的工作是在应用程序的各个组件之间共享数据。

开箱即用的Vue.js中的组件可以使用

  • 道具,将状态从父级传递给子级组件
  • 大事记,从子级更改父组件的状态,或将根组件用作事件总线

有时候事情变得比这些简单的选项所允许的更为复杂。

在这种情况下,一个不错的选择是将状态集中在一个存储中。这就是Vuex所做的。

为什么要使用Vuex

Vuex不是您可以在Vue中使用的唯一状态管理选项(您可以使用Redux也是如此),但是它的主要优点是它是官方的,并且与Vue.js的集成才使它大放异彩。

使用React,您将不得不选择众多可用库之一,因为该生态系统庞大且没有实际标准。最近,Redux是最受欢迎的选择,MobX在人气方面紧随其后。有了Vue,我想说的就是,除了Vuex之外,您无需四处寻找其他东西,尤其是在开始学习时。

Vuex从React生态系统中借鉴了许多想法,因为这是Redux流行的Flux模式。

如果您已经了解Flux或Redux,那么Vuex将非常熟悉。如果您没有,那就没问题-我将彻底解释每个概念。

Vue应用程序中的组件可以具有自己的状态。例如,一个输入框将在本地存储输入到其中的数据。这非常好,即使使用Vuex,组件也可以具有局部状态。

您知道开始进行大量工作来传递状态时需要Vuex之类的东西。

在这种情况下,Vuex为状态提供了一个中央存储库,您可以通过请求状态来对状态进行更改。

依赖于状态的特定部分的每个组件都将使用商店中的getter来访问它,以确保在状态发生变化时立即对其进行更新。

使用Vuex会给应用程序带来一些复杂性,因为需要以某种特定的方式进行设置才能正常工作,但是如果这有助于解决无组织的道具传递和事件系统(如果过于复杂则可能会变成意大利面条),那么一个不错的选择。

开始吧

在这个例子中,我从一个Vue CLI应用。也可以通过直接将Vuex加载到脚本标签中来使用Vuex,但是由于Vuex更适合大型应用程序,因此您很有可能会在结构化的应用程序上使用它,例如可以通过Vue快速启动的应用程序。 CLI。

我使用的示例将放在CodeSandbox中,它是一项很棒的服务,具有准备就绪的Vue CLI示例https://codesandbox.io/s/vue。我建议使用它来玩耍。

CodeSandbox

到达之后,请按一下添加依赖按钮,输入“ vuex”,然后单击它。

现在,Vuex将列在项目依赖项中。

要在本地安装Vuex,您可以运行npm install vuex或者yarn add vuex在项目文件夹中。

创建Vuex商店

现在,我们准备创建Vuex商店。

该文件可以放在任何地方。一般建议将其放入src/store/store.js文件,所以我们会这样做。

在此文件中,我们初始化Vuex并告诉Vue使用它:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Vuex store

我们导出Vuex商店对象,该对象是使用Vuex.Store()API。

商店的用例

现在我们已经有了一个框架,让我们提出一个关于Vuex的好用例的想法,以便我介绍它的概念。

例如,我有2个同级组件,一个带有一个输入字段,另一个打印该输入字段的内容。

当输入字段更改时,我还要更改第二个组件中的内容。很简单,但这将为我们完成工作。

介绍我们需要的新组件

我删除HelloWorld组件,并添加一个Form组件和一个Display组件。

<template>
	<div>
		<label for="flavor">Favorite ice cream flavor?</label>
		<input name="flavor">
	</div>
</template>
<template>
	<div>
		<p>You chose ???</p>
	</div>
</template>

将这些组件添加到应用程序

我们将它们添加到App.vue代码而不是HelloWorld组件中:

<template>
  <div id="app">
    <Form/>
    <Display/>
  </div>
</template>

<script> import Form from ‘./components/Form’ import Display from ‘./components/Display’

export default { name: ‘App’, components: { Form, Display } } </script>

将状态添加到商店

因此,有了这个,我们回到store.js文件,并向商店添加一个属性,名为state,这是一个对象,其中包含flavor财产。最初是一个空字符串。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ } })

当用户在输入字段中键入内容时,我们将对其进行更新。

添加一个突变

该状态只能通过使用来操纵变异。我们设置了一个突变,该突变将在Form组件内部用于通知商店状态应该更改。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } } })

添加吸气剂以引用状态属性

设置好之后,我们需要添加一种查看状态的方法。我们使用吸气剂。我们为flavor财产:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({ state: { flavor: ‘’ }, mutations: { change(state, flavor) { state.flavor = flavor } }, getters: { flavor: state => state.flavor } })

注意如何getters是一个对象。flavor是此对象的属性,该对象接受状态作为参数,并返回flavor国家的财产。

将Vuex商店添加到应用程序

现在该商店已准备就绪,可以使用了。我们回到应用程序代码,在main.js文件中,我们需要导入状态并将其在我们的Vue应用程序中可用。

我们增加

import { store } from './store/store'

并将其添加到Vue应用程序中:

new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

一旦添加此代码,由于它是Vue的主要组件,因此store每个Vue组件内的变量将指向Vuex存储。

使用提交更新用户操作的状态

让我们在用户键入内容时更新状态。

我们通过使用store.commit()API。

但是首先,让我们创建一个在输入内容更改时调用的方法。我们用@input而不是@change因为后者仅在焦点从输入框移开时才触发,而@input在每次按键时都会被调用。

<template>
  <div>
    <label for="flavor">Favorite ice cream flavor?</label>
    <input @input="changed" name="flavor">
  </div>
</template>

<script> export default { methods: { changed: function(event) { alert(event.target.value) } } } </script>

现在我们有了风味的价值,我们使用Vuex API:

<script>
export default {
  methods: {
    changed: function(event) {
      this.$store.commit('change', event.target.value)
    }
  }
}
</script>

看看我们如何使用this.$store?这要归功于在主要Vue组件初始化中包含了存储对象。

commit()方法接受一个突变名称(我们使用了change(在Vuex存储中)和有效负载,这些负载将作为回调函数的第二个参数传递给该突变。

使用吸气剂打印状态值

现在,我们需要使用以下方法在“显示”模板中引用该值的获取方法:$store.getters.flavorthis可以删除,因为我们在模板中,并且this是隐式的。

<template>
  <div>
    <p>You chose {{ $store.getters.flavor }}</p>
  </div>
</template>

包起来

就是对Vuex的介绍!

完整的有效源代码可在以下位置获得:https://codesandbox.io/s/zq7k7nkzkm

这个难题中仍然缺少许多概念:

  • 行动
  • 模组
  • 帮手
  • 外挂程式

但是您有基础知识可以在官方文档中阅读。

祝您编码愉快!

免费下载我的Vue手册


更多vue教程: