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