如何使用集中式狀態管理的Vuex？以下這篇文章就帶大家了解一下vuex，簡單聊聊vuex的使用方法，希望對大家有幫助！
一個專門在Vue中實作集中式狀態管理的一個Vue插件,可以對vue應用中多個元件的共享狀態進行集中式的管理(讀取/寫入)，也是一種元件間通訊的方式，並且適用於任意元件間通訊
#2.何時使用Vuex
1.多個元件依賴相同狀態
2.來自不同元件的行為需要變更相同狀態
2.1如何使用Vuex
#首先我們要知道，如果使用了Vuex就大機率需要兩個或多個元件共享一套數據/狀態，所以首先需要準備兩個元件（分別為Count，Person），再就是我們要在src目錄下新增一個store文件，因為Vuex就是依賴store來進行一系列的準備任務的
2.2Count元件
在這個元件內我們可以看到map...一堆東西，這裡我們就必須說vuex裡面的四個map了，如何使用map方法我放到了最後，這裡我們只介紹一下該組件的功能Count是個有著「強大」計算功能的組件，它可以進行將最後的數進行放大10倍，可以奇數運算，可以延遲運算可謂是極其的「強大」
<template>
<div>
<h3>当前和为：{{sum}}</h3>
<h3>当前和为：放大10倍：{{bigSum}}</h3>
<h3>我在{{school}},学习{{subject}}</h3>
<h3>下方组件的总人数{{personList.length}}</h3>
<select v-model.number="num">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment(num)">＋</button>
<button @click="decrement(num)">-</button>
<button @click="incrementOdd(num)">奇数＋</button>
<button @click="incrementWait(num)">500ms后再＋</button>
</div>
</template>
<script>
// 引入mapState等
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
name: "Count",
data() {
return {
num: 1 // 用户选择的数字
};
},
computed: {
// 使用mapState生成计算属性，从state种读取数据(...mapstate()的意思是将其内的对象全部展开的计算属性里面)
// ...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
...mapState(["sum", "school", "subject", "personList"]), // 数组写法
// 使用mapGetters生成计算属性，从getters种读取数据
// ...mapGetters(["bigSum"]), // 数组写法
...mapGetters({ bigSum: "bigSum" }) // 数组写法
},
methods: {
// 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }) //数组式
// ...mapActions(["jiaodd", "jiaWait"]) //数组式简写
},
mounted() {
}
};
</script>
<style>
button {
margin-left: 5px;
}
</style>#2.3Person元件
Person元件有著「強大」的人員所添加的功能，他可以按照自己的意願進行添加你的親朋好友等
<template>
<div>
<h3>人员列表</h3>
<h3>Count组件的求和为{{sum}}</h3>
<input type="text" placehodler="请输入名字" v-model="name">
<button @click="add">添加</button>
<ul>
<li v-for="p in personList" :key="p.id">{{p.name}}</li>
</ul>
</div>
</template>
<script>
import { nanoid } from "nanoid";
export default {
name: "Person",
data() {
return {
name: ""
};
},
computed: {
personList() {
return this.$store.state.personList;
},
sum() {
return this.$store.state.sum;
}
},
methods: {
add() {
const personObj = { id: nanoid(), name: this.name };
this.$store.commit("ADD_PERSON", personObj);
this.name = "";
}
}
};
</script>#2.4引入組件
分別再App內引入這兩個元件
<template>
<div class="container">
<Count></Count>
<Person/>
</div>
</template>
<script>
import Count from "./components/Count";
import Person from "./components/Person";
export default {
name: "App",
components: { Count, Person }
};
</script>2.5設定store資料夾下的index.js
要在store資料夾下面新建一個index.js文件，然後再index檔案裡面寫入如下程式碼，首先是引入vue和vuex，再使用action進行動作回應，在這裡我們可以接收到兩個參數分別式context和value他們分別式上下文和所傳入的值，我們可以再context身上發現我們所配置的state裡面的所有東西,這就是context身上的東西，和value，這裡value的值就是1
// 创建VUex种的store核心
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用vuex插件
Vue.use(Vuex)
// 准备actions——用于组件内的动作响应
const actions = {
// 奇数加法
jiaodd(context, value) {
if (context.state.sum % 2) {
context.commit('JIA', value)
}
},
// 延迟加
jiaWait(context, value) {
setTimeout(() => {
context.commit("JIA", value)
}, 500);
},
}
// 准备mutations——用于数据操作
const mutations = {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
},
ADD_PERSON(state, value) {
console.log('mustations种的ADD_PERSON被调用',state.personList);
state.personList.unshift(value)
}
}
// 准备state——用于数据的储存
const state = {
sum: 0, // 当前和
school: '山鱼小学',
subject: '前端',
personList:[{id:'001',name:'张三'}]
}
// 用于加工state种的数据
const getters = {
bigSum(state) {
return state.sum * 10
}
}
// 创建store并且暴露store
export default new Vuex.Store({
// actions: actions,// 前后名称一样所以可以触发简写模式
actions,
mutations,
state,
getters
});#1.mapState:用來幫助我們對應state中的資料為計算屬性
computed: {
// 使用mapState生成计算属性，从state种读取数据(...mapstate({})的意思是将其内的对象全部展开的计算属性里面)
...mapState({ sum: "sum", school: "school", subject: "subject" }), // 对象写法
// ...mapState(["sum", "school", "subject"]), // 数组写法
}#2.mapGetters:用來幫助我們將getters中的資料對應為計算屬性
computed: {
// 使用mapGetters生成计算属性，从getters种读取数据
...mapGetters({bigSum："bigSum"})
...mapGetters(["bigSum"])
}3.mapMutations:用於幫助我們產生與mutations交流的方法，包含$store.commit()的函數
methods: {
// 借助mapMutations生成对应的方法，方法种会调用相应的commit去联系mutations
...mapMutations({ increment: "JIA", decrement: "JIAN" }), // 对象式
// ...mapMutations(["JIA", "JIAN"]), // 数组式(button的名字和vuex里面的名字必须统一)
},3.mapActions#:用來幫助我們產生與mutations交流的方法，包含$store.commit()的函數
methods: {
// 借助mapActions生成对应的方法，方法种会调用相应的dispath去联系actions
...mapActions({ incrementOdd: "jiaodd", incrementWait: "jiaWait" }), //对象式
// ...mapActions(["jiaodd", "jiaWait"]) //数组式
},註:mapActions與mapMutations使用時，若需要傳遞參數需要在模板中綁定事件時傳遞好參數，否則參數是事件物件。
以上是淺析集中式狀態管理Vuex的使用方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
