1， 概念： 專門在Vue中實(shí)現(xiàn)集中式狀態(tài)(數(shù)據(jù))管理的一個(gè)Vue插件(Vue.use())， 對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理(讀/寫), 也是一種組件間通信的方式， 且適用于任意組件間通信
2, github地址：https://github.com/vuejs/vuex
二. 什么時(shí)候用vuex
1, 多個(gè)組件依賴于同一狀態(tài)
2, 來自不同組件的行為需要變更同一狀態(tài)
三. 使用過程
1, npm i vuex@3 (安裝插件)
注意： 2022年7月，默認(rèn)安裝vue為npm vue3版本， vuex默認(rèn)版本為vuex4(只能在vue3中使用)
1, vue2, 使用vuex3
2, vue3, 使用vuex4
2, Vue.use(Vuex)
3, store
4, vc ==> store(每個(gè)組件都可以用store)
四. 搭建vuex環(huán)境
1, 創(chuàng)建store文件 ./store/index.js
//該文件用于創(chuàng)建Vuex中最為核心 的store
//引入vue
import Vue from "vue";
//引入vuex庫(kù)
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //讓各個(gè)組件中擁有store屬性
//準(zhǔn)備ctions--用于響應(yīng)組件中的動(dòng)作
const actions = {}
//準(zhǔn)備mutations--用于操作數(shù)據(jù)(state)
const mutations = {}
//準(zhǔn)備state = {}
const state = {}
export default new Vuex.Store({
actions,
mutations,
state
})2, 在main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)
//引入store
import store from './store'
Vue.config.productionTip = false
new Vue({
el:'#app',
render: h=> h(App),
store,
beforeCreate() {
Vue.prototype.$bus = this;
//安裝全局事件總線, 所有的VC,VM都能看到$bus
},
})五. 實(shí)例代碼應(yīng)用
Count.vue組件： 增加數(shù)據(jù)
1.1 dispath調(diào)用 actions， actions提交到mutations， mutations直接修改數(shù)據(jù)
1.2 commit調(diào)用mutations, mutations直接修改數(shù)據(jù)
組件中修改vue數(shù)據(jù)：
this.$store.dispatch('actions中的方法名',數(shù)據(jù)) 【邏輯復(fù)雜時(shí)，把業(yè)務(wù)邏輯寫在actions中】
this.$store.commit('mutations中的方法名',數(shù)據(jù)) 【沒什么邏輯時(shí)使用】
<template>
<div>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<button @click="increment">加一</button>
<button @click="deincrement">減一</button>
</div>
</template>
<script>
export default {
name:'Count',
data() {
return {
n:1
}
},
methods:{
increment(){
this.$store.dispatch('increment',this.n)
//dispatch中的increment: 對(duì)應(yīng)store.js中actions中的increment方法
},
deincrement(){
this.$store.commit('DEINCREMENT',this.n)
//commit中的increment: 對(duì)應(yīng)store.js中mutations中的increment方法
//如果不需要actions做什么(即不需要服務(wù)員做什么), 可以直接找后廚
}
}
}
</script>2, 更新state信息
//該文件用于創(chuàng)建Vuex中最為核心 的store
//引入vue
import Vue from "vue";
//引入vuex庫(kù)
import Vuex from "vuex";
// 使用vuex
Vue.use(Vuex) //讓各個(gè)組件中擁有store屬性
export default new Vuex.Store({
//準(zhǔn)備actions--用于響應(yīng)組件中的動(dòng)作
actions:{
increment(context,value){
//context中還有dispatch[可以調(diào)用其它方法],及state
//寫業(yè)務(wù)代碼，調(diào)整value
context.commit('INCREMENT',value)
//commit中的increment: 對(duì)應(yīng)mutations中的increment方法
//注意： 這里也可以直接執(zhí)行mutations中的數(shù)據(jù)，只是開發(fā)者工具看不到效果
}
},
//準(zhǔn)備mutations--用于操作數(shù)據(jù)(state)
mutations:{
INCREMENT(state,value){
state.sum += value
console.log(value,state.sum);
},
DEINCREMENT(state,value){
state.sum -= value
}
},
//準(zhǔn)備state = {}
state:{
sum:1
},
//準(zhǔn)備getters , 用于加工state中的數(shù)據(jù)， 類似于computed屬性
getters:{
bigSum(state){
return state.sum * 10
}
}
})3, 讀取state信息
組件中讀取vue數(shù)據(jù)： {{$store.state.sum}}
<template>
<div class="main">
<h1>vuex學(xué)習(xí)</h1>
<!-- 模板里面能夠看到VC里面的所有東西, 所以這里不用寫this.$store -->
<p>當(dāng)前的和是:{{$store.state.sum}}</p>
<p>當(dāng)前的和*10的結(jié)果是:{{$store.getters.bigSum}}</p>
<Count/>
</div>
</template>
<script>
import Count from './components/Count.vue'
export default {
name:"App",
components:{
Count,
},
mounted() {
console.log(this);
},
}
</script>4, getters的使用
1, 概念： 當(dāng)state中的數(shù)據(jù)需要經(jīng)過加工后再使用時(shí)， 可以使用getters加工
2, 見2中的實(shí)例
3, 組件中讀取{{$store.getters.bigSum}}
