腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vuex的使用及知識(shí)點(diǎn)筆記

更新時(shí)間：2022年12月07日 09:24:41 作者：鍵.

這篇文章主要介紹了Vuex的使用及知識(shí)點(diǎn)筆記，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

1 入門(mén)

vuex是為vue.js專(zhuān)門(mén)提供的狀態(tài)管理模式

簡(jiǎn)單解釋?zhuān)簩⑺薪M件公用的數(shù)據(jù)、方法提取到指定的地方，進(jìn)行統(tǒng)一管理

2 安裝

下載vuex

npm i vuex --save

在src根目錄中新建一個(gè)store文件夾并新建一個(gè)index.js文件，并在index.js中引入vue和vuex

import Vue from 'vue'
//導(dǎo)入vuex插件
import Vuex from 'vuex'

//使用vuex插件
Vue.use(Vuex)

export default new Vuex.Store({
	state:{//state相當(dāng)于普通組件中的data數(shù)據(jù)域
		
	},
	getters:{//getter相當(dāng)于computed對(duì)象
		
	},
	mutations:{//mutations相當(dāng)于methods對(duì)象
		
	},
	actions:{
		
	},
	modules:{//分割模塊
		
	}
})

在main.js中導(dǎo)入index.js文件并掛載

3 核心概念的使用

3.1 state

state為vuex中的公共狀態(tài)，我們可以看成state為所有組件的data,用于保存所有組件的公共數(shù)據(jù)·。

export default new Vuex.Store({
	state:{//state相當(dāng)于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨']
	}
})

在任意組件內(nèi)可以使用this.$store.state.names來(lái)獲取到state里面的數(shù)據(jù)

 <p>{{this.$store.state.names}}</p>

3.2 getters

vuex的getters屬性可以理解為所有組件的computed屬性，也就是計(jì)算屬性.getters的返回值會(huì)根據(jù)其依賴(lài)緩存起來(lái)的，只有當(dāng)依賴(lài)的值發(fā)生改變，getters才會(huì)重新計(jì)算

export default new Vuex.Store({
	state:{//state相當(dāng)于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當(dāng)于computed對(duì)象
		add(state){//state的數(shù)據(jù)會(huì)自動(dòng)傳入add的方法
			return state.num+5
		}
	}
})

在任意的組件內(nèi)使用this.$store.getters.add調(diào)用計(jì)算的方法

<p>{{this.$store.state.names}}</p>
<p>{{this.$store.getters.add}}</p>

3.3 mutations

vuex中的mutations可以理解為所有組件的methods方法。

mutations對(duì)象中保存了更改數(shù)據(jù)的回調(diào)函數(shù)。

第一個(gè)參數(shù)為state,第二個(gè)參數(shù)為payload,相當(dāng)于自定義參數(shù)

export default new Vuex.Store({
	state:{//state相當(dāng)于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當(dāng)于computed對(duì)象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相當(dāng)于methods對(duì)象
		add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
			state.num+=payload;
		}
	}
})

在任意組件內(nèi)通過(guò)this.$store.commit()觸發(fā)mutations內(nèi)的方法

<template>
	<div id='Home'>
        <p>{{this.$store.state.names}}</p>
        <p>{{this.$store.getters.add}}</p>
        <p><input type="text"  v-model="this.$store.state.num"/> <span @click="add()">+</span></p>
    </div>
</template>

<script>
export default{
	name:'Home',
	methods:{
		add(){
            // this.$store.commit('evnetName',自定義的參數(shù))
			this.$store.commit('add',5)
		}
	}
}
</script>

每一次點(diǎn)擊都會(huì)給state里面的num數(shù)據(jù)加5

3.4 actions

actions和mutations類(lèi)似，不同點(diǎn)在于：

1、actions提交的是mutations,而不是直接變更狀態(tài)

2、actions中包含異步，mutations中絕對(duì)不允許出現(xiàn)異步

3、actions中回調(diào)函數(shù)的第一個(gè)參數(shù)為context,得到一個(gè)與store具有相同屬性和方法的對(duì)象

export default new Vuex.Store({
	state:{//state相當(dāng)于普通組件中的data數(shù)據(jù)域
		names:['胡桃','甘雨'],
		num:5
	},
	getters:{//getter相當(dāng)于computed對(duì)象
		add(state){
			return state.num+5
		}
	},
	mutations:{//mutations相當(dāng)于methods對(duì)象
		add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
			state.num+=payload;
		}
	},
	actions:{
		addSync(context,payload){
			setTimeout(()=>{
                //add為mutations內(nèi)定義的函數(shù)
                //通過(guò)commit調(diào)用mutations內(nèi)的函數(shù)
				context.commit('add',payload)
			},1000)
		}
	},
})

組件內(nèi)綁定事件

<p><input type="text"  v-model="this.$store.state.num"/> <span @click="addSync()">+</span></p>

通過(guò) this.$store.dispatch調(diào)用actions內(nèi)的異步方法

methods:{
		addSync(){
			this.$store.dispatch('addSync',2)
		}
	}

測(cè)試的效果就是每次點(diǎn)擊之后，要過(guò)1s才會(huì)改變state里面的數(shù)值num

3.5 modules

由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。

當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

為了解決以上問(wèn)題，Vuex 允許我們將 store 分割成模塊（module）。

每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

在組件內(nèi)分模塊進(jìn)行訪(fǎng)問(wèn)

<h2>{{this.$store.state.a.count}}</h2>
<h2>{{this.$store.state.b.msg}}</h2>

4 輔助函數(shù)的使用

mapState、mapGetters、mapMutations、mapActions

引入

import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'

在computed中使用擴(kuò)展運(yùn)算符進(jìn)行定義

export default {
  name: 'list',
  data () {
    return {
    }
  },
  computed:{
    	  ...mapState({
		  //Index則代表state的num屬性
		index:'num'
	  }),
	  ...mapGetters({
		  // 屬性值add則代表getters內(nèi)的add方法
		  add:'add'
	  }) 
  },
  methods:{
     ...mapMutation({
		  addNum:'addNum'
	  }),
	  ...mapActions({
		  
	  }) 
  }
}