快捷導(dǎo)航

Vue組件間通信 Vuex的用法解析

更新時(shí)間：2019年08月05日 08:24:19 作者：計(jì)算機(jī)-小白

這篇文章主要介紹了Vue組件間通信-Vuex,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

上回說(shuō)到Vue組件間通訊，最后留了一個(gè)彩蛋~~~Vuex。Vuex是另一種組件通訊的方法，這節(jié)來(lái)說(shuō)說(shuō)Vuex(store倉(cāng)庫(kù))。

首先Vuex需要安裝，安裝的方式有很多，在這里就不一一細(xì)說(shuō)了。我是通過(guò)npm方式安裝的：

npm install vuex --save

安裝好之后需要再main.js里全局引入：

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)new Vue({el:'#app',store,components: { App },template: '<App/>'})

這樣就完成了Vuex的安裝。接下來(lái)就是Vuex的用法了：

Vuex有五個(gè)屬性：State、Getter、Mutation、Action、Module。

1. State里放入的是倉(cāng)庫(kù)的數(shù)據(jù)，類(lèi)似于js里的data：

import Vue from 'vue'
const modules = {
 state:{
 name: '小白'
 }
 namespaced: true
}
export default modules

把Vuex放入src下的store文件里，建一個(gè)新的組件modules，然后把他拋出來(lái)，被引入所需數(shù)據(jù)的組件：

<script>
import { mapState }from 'vuex'
export default {
 computed:{
 // name(){
 // return this.$store.state.name
 // }
 ...mapState(['name'])
 },
 mounted(){
 console.log(this.name)
 }
}
</script>

Vuex里的數(shù)據(jù)需要從計(jì)算屬性(computed)里獲取，我寫(xiě)了兩種我常用的方法，都可以接收到數(shù)據(jù)，在mounted鉤子里打印出的數(shù)據(jù)：

這里只是舉個(gè)例子教大家如何用，不建議大家向我這樣去寫(xiě)，Vuex應(yīng)該用于所有業(yè)務(wù)邏輯的數(shù)據(jù)。不涉及到業(yè)務(wù)邏輯的，建議大家用上一章的方法：Vue組件間通信。

2. Getters里放入State里數(shù)據(jù)的擴(kuò)展數(shù)據(jù)，可以把它當(dāng)作計(jì)算屬性。比如State里有一個(gè)數(shù)組，就可以從Getters里獲取到數(shù)組的長(zhǎng)度，或是取到對(duì)象里面的屬性，用法和計(jì)算屬性類(lèi)似：

import Vue from ‘vue'

const modules = {
 state:{
 list:[
  {id :1,content: '第一條'},
  {id :2,content: '第二條'}
 ]
 }，
 getter:{
 listLength: (state)=>{return state.list.length}
 },　　 namespaced: true}export default modules;

我在state里存了一個(gè)數(shù)組，然后getters計(jì)算出state里數(shù)組的長(zhǎng)度，接下來(lái)就是在組件里接收了：

<script>
import { mapGetters } from 'Vuex'
export default {
 compoted:{
 ...mapGetters(['listLength'])
 },
 mounted(){
 console.log(this.listLegth)
 }
}
</script>

打開(kāi)控制臺(tái)打印出2，就是list數(shù)組的長(zhǎng)度。

3. Mutations是保存在倉(cāng)庫(kù)的方法，這個(gè)方法只能用來(lái)改變state里面的數(shù)據(jù)，而且想要改變state里的數(shù)據(jù)只能用mutations里的方法，并且它里面的方法只能是同步的：

import Vue from 'vue'

const modules = {
 state:{
 name: '小黑'
 },
 mutations:{
 changeName(state){
  state.name = '小白'
 }
 },
 namespaced: true
}
export default modules;

還是那個(gè)例子，下面是組件調(diào)用方法：

<html>
<div>
 {{ name }}
 <el-button @click="changeName">改變名字</el-button>
</div>
</html>
<script>
import { mapState,mapMutations } from 'vuex'
export default {
 compoted:{
 ...mapState(['name'])
 },
 methods:{
 ...mapMutations(['changeName'])
 }
}
</script>

頁(yè)面渲染后為：

點(diǎn)擊按鈕之后為：

組件里的按鈕通過(guò)調(diào)用Vuex里的mutation方法將Vuex里的state數(shù)據(jù)改變，只不過(guò)mutations方法只能同步的，涉及到接口的就不能在它里面寫(xiě)，怎么辦的？往下看：

4. Actions和mutations一樣都是Vuex里的方法，只不過(guò)他們有兩個(gè)最大的不同：

(1) Actions里可以存放異步方法，而Mutations只能放同步的；

(2) Actions里不可以更改state里的數(shù)據(jù)，state里的數(shù)據(jù)只能在Mutations里更改。

Actions是什么方法？簡(jiǎn)單的說(shuō)，它就是一個(gè)Promise方法，通過(guò)不同的狀態(tài)執(zhí)行不同的方法，執(zhí)行方法可以是Actions里的方法，也可以是Mutations里的方法。

Actions我就不舉例子了，因?yàn)榇蟛糠侄加糜赼xios請(qǐng)求接口，簡(jiǎn)單跟大家說(shuō)說(shuō)這個(gè)東西怎么使用：

import Vue from 'vue'
import request from '@/api/axios'

const modules = {
 state:{
 list:[]
 },
 actions:{
 getList({ commit }){
  // 調(diào)用接口方法
  request.getList()
  .then((response)=>{
  // commit用來(lái)分配mutations方法
  commit('getList',response)
  })
 }
 }，
 mutations：{
 getList(state,response){
  state.list = response.data
 }
 }
}

簡(jiǎn)單利用actions異步方法分配給mutations方法，然后在mutations方法里給state里的數(shù)據(jù)賦值，取到接口數(shù)據(jù)。

commit用于分配mutations方法，dispatch用于分配actions方法，都需要傳參進(jìn)去。

組件調(diào)用其實(shí)和調(diào)用mutations方法類(lèi)似：

<script>
import { mapState,mapActions } from 'vuex'
export default {
 computed:{
 ...mapState(['list'])
 },
 mounted(){
 this.getList()
 },
 methods:{
 ...mapActions(['getList'])
 }
}
</script>

這樣就基本完成了vuex傳值。

5. module可以把vuex分為不同的模塊，使業(yè)務(wù)邏輯變得更清晰，更準(zhǔn)確。在上面的代碼里，有const modules，給它不同的名字就是分為不同的模塊。不同的module可以存入不同的數(shù)據(jù)和方法，使用起來(lái)非常方便。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: