1. 犀牛前端部落首页
  2. vue

vuex教程

vuex教程

Vuex,Vue.js状态管理

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

Vuex介绍

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

它的作用是跨应用程序的组件共享数据。

在Vue.js中,组件之间通信:

  • props,将状态从父组件传递到子组件
  • events,以从子组件更改父组件的状态,或使用根组件作为事件总线

有时候,事情比这些简单的选项所允许的要复杂得多。

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

为什么要使用Vuex

Vuex并不是Vue中唯一可以使用的状态管理选项(你也可以使用Redux),但它的主要优势在于它是官方的,它与Vue.js的集成使它脱颖而出。

使用React时,您会遇到不得不从众多可用库中选择一个的麻烦,因为生态系统非常庞大,而且没有事实上的标准。最近Redux是最受欢迎的选择,MobX紧随其后。对于Vue,我想说的是,除了Vuex,你不需要四处寻找其他任何东西,尤其是在开始的时候。

Vuex从React生态系统中借鉴了许多想法,因为这是Redux推广的通量模式。

如果你已经知道Flux或者Redux,你会非常熟悉Vuex。如果你不知道,没问题——我会从头开始解释每一个概念。

Vue应用程序中的组件可以有自己的状态。例如,输入框将本地存储输入的数据。这是完美的,组件可以有本地状态,即使使用Vuex。

你知道你需要像Vuex这样的东西当你开始做大量的工作来传递一个状态。

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

每个依赖于状态的特定部分的组件将使用存储上的getter访问它,这确保它在事情发生变化时立即更新。

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

开始

在本例中,我从一个Vue CLI应用程序开始。Vuex也可以直接加载到脚本标签中,但由于Vuex更适合大型应用程序,你更有可能将它用于更结构化的应用程序,比如那些你可以用Vue CLI快速启动的应用程序。

我使用的示例将是放置CodeSandbox,这是一个很好的服务,它有一个Vue CLI示例,可以在https://codesandbox.io/s/vue上使用。我建议你用它来玩玩。

vuex教程

打开上面的连接后,点击Add dependency按钮,进入“vuex”并点击它。

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

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

创建Vuex Store

现在我们准备创建我们的Vuex Store。

这个文件可以放在任何地方。通常建议将其放在src/store/store.js文件中,所以我们会这样做。

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

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

Vue.use(Vuex)

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

我们导出一个Vuex存储对象,它是使用Vuex. store () API创建的。

使用案例

现在我们已经有了一个框架,让我们为Vuex的一个好的用例提出一个想法,这样我就可以介绍它的概念了。

例如,我有两个兄弟组件,一个具有输入字段,另一个用于打印输入字段内容。

在更改输入字段时,我还希望更改第二个组件中的内容。很简单,但这个就够了。

创建组件

我删除了HelloWorld组件,并添加了一个表单组件和一个显示组件。

<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文件,并向store添加一个属性state,它是一个对象,包含flavor属性。默认是一个空字符串。

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

Vue.use(Vuex)

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

我们将在用户输入字段时更新它。

添加一个mutation

状态不能被操纵,除非使用mutation。我们设置了一个mutation,它将在表单组件内部使用,以通知存储应该改变状态。

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
    }
  }
})

访问状态属性

对于这个集合,我们需要添加一种查看状态的方法。我们使用getter来实现。我们为flavor属性设置了一个getter:

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
  }
})

注意:getter是一个怎样的对象。

flavor是这个对象的一个属性,它接受状态作为参数,并返回状态的flavor属性。

添加Vuex Store到app

现在store已经可以使用了。回到我们的应用程序代码,在main.js文件中,我们需要导入状态并使其在Vue应用程序中可用。

我们添加

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

添加到Vue应用中

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

一旦我们添加了这个,因为这是主要的Vue组件,所以每个Vue组件中的store变量将指向Vuex store。

更新状态

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

我们通过使用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>

现在我们有了 flavor 的值,我们使用Vuex API:

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

看看我们是如何使用这个来引用store的。$store?这要感谢在主Vue组件初始化中包含了store对象。

commit()方法接受一个mutation名称(我们在Vuex商店中使用了change)和一个有效负载,它将作为其回调函数的第二个参数传递给mutation。

显示内容

现在我们需要使用$store.getters.flavor在显示模板中引用这个值的getter。

this可以删除,因为我们在模板中,这是隐式的。

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

总结

以上就是对Vuex的介绍!

完整的工作源代码可以在https://codesandbox.io/s/zq7k7nkzkm获得

在这个文章中仍有许多知识未介绍:

  • actions
  • modules
  • helpers
  • plugins

想深入了解相关知识的,可以查阅官方文档

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/4419.html

发表评论

登录后才能评论