努力不一定成功，但是，不努力一定很輕松?。?！
【23.Vuex】
[可以去官網(wǎng)看看Vuex3文檔](Vuex 是什么？ | Vuex (vuejs.org))
-
問題1：Vuex是什么？
-
【官方理解1】：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)【數(shù)據(jù)】管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools。
-
【理解2】：vuex是使用vue中必不可少的一部分，基于父子、兄弟組件，我們傳值可能會(huì)很方便，但是如果是沒有關(guān)聯(lián)的組件之間要使用同一組數(shù)據(jù)，就顯得很無能為力，那么vuex就很好的解決了我們這種問題，它相當(dāng)于一個(gè)公共倉庫，保存著所有組件都能共用的數(shù)據(jù)。
-
【理解3】：Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式，Vuex是實(shí)現(xiàn)組件
全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享。如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。如果您的應(yīng)用夠簡單，最好不要使用Vuex。 -
【理解4】：Vuex是在Vue中實(shí)現(xiàn)集中式狀態(tài)（數(shù)據(jù)）管理的一個(gè)Vue插件，對(duì)vue應(yīng)用中多個(gè)組件的共享狀態(tài)進(jìn)行集中式的管理（讀/寫），也是一種組件間通信的方式，且適用于任意組件間通信。
-
-
問題2：使用Vuex管理數(shù)據(jù)優(yōu)勢？
- 能夠在 vuex 中集中管理共享的數(shù)據(jù)【state中】，便于開發(fā)和后期進(jìn)行維護(hù)。
- 能夠高效的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開發(fā)效率。
- 存儲(chǔ)在 vuex 中的數(shù)據(jù)是響應(yīng)式的，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，頁面中的視圖也會(huì)同步更新。
- vuex中的數(shù)據(jù)操作可以在開發(fā)階段通過開發(fā)調(diào)試工具來進(jìn)行追蹤，便于開發(fā)。
- 簡單來說，vuex 就是為了實(shí)現(xiàn)組件間通信的。使用 vuex 的好處：可以跨層級(jí)進(jìn)行通信；vuex 中的所有操作都有記錄；vuex 獨(dú)立于組件系統(tǒng)，是專門用來管理數(shù)據(jù)的框架。
注意：
- vuex 是 vue 作者為我們提供的一套全局狀態(tài)管理工具。
- 標(biāo)準(zhǔn)化操作數(shù)據(jù)，代碼調(diào)試和封裝更加有據(jù)可行。
- 集中式的數(shù)據(jù)管理，便于查看數(shù)據(jù)。
- vuex 中的數(shù)據(jù)沒有持久化能力，如果想要持久化，可以自行來解決。
- vuex 解決的問題是在復(fù)雜項(xiàng)目中，組件間的通信。
-
問題3：什么時(shí)候使用Vuex？
Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對(duì)短期和長期效益進(jìn)行權(quán)衡。如果您不打算開發(fā)大型單頁應(yīng)用，使用 Vuex 可能是繁瑣冗余的。確實(shí)是如此——如果您的應(yīng)用夠簡單，您最好不要使用 Vuex。一個(gè)簡單的 store 模式就足夠您所需了。但是，如果您需要構(gòu)建一個(gè)中大型單頁應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。
-
問題4：安裝vuex環(huán)境
-
【vue2版本】：需要安裝vuex3這個(gè)版本
npm i vuex@3 //@:指定版本 -
【vue3版本】：需要安裝vuex4這個(gè)版本
npm i vuex@4 //@:指定版本
-
-
問題5：配置vuex環(huán)境
新建store文件->index.js，進(jìn)行如下配置，在main.js中進(jìn)行引入
//引入Vue核心庫 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //應(yīng)用Vuex插件 Vue.use(Vuex) //準(zhǔn)備actions對(duì)象——響應(yīng)組件中用戶的動(dòng)作 const actions = {} //準(zhǔn)備mutations對(duì)象——修改state中的數(shù)據(jù) const mutations = {} //準(zhǔn)備state對(duì)象——保存具體的數(shù)據(jù) const state = {} //創(chuàng)建并暴露store export default new Vuex.Store({ // 簡寫 actions, mutations, state })在
main.js中創(chuàng)建vm時(shí)傳入store配置項(xiàng)【因?yàn)?code>index.js這種特殊的命名可以被vue識(shí)別，所以引入的時(shí)候，不用./store/index.js】...... //引入store import store from './store' ...... //創(chuàng)建vm new Vue({ el:'#app', render: h => h(App), store, })
Vuex
- 組件派發(fā)【dispatch】任務(wù)到actions，actions觸發(fā)mutations中的方法，然后mutations來改變state中的數(shù)據(jù)，數(shù)據(jù)變更后響應(yīng)推送給組件，組件重新渲染。
成員列表：
- state：存放狀態(tài)(全局狀態(tài)數(shù)據(jù)) 必填項(xiàng)。
- getters：獲取 state 中的數(shù)據(jù)，可以認(rèn)為是 store 的計(jì)算屬性【類似于組件中的計(jì)算屬性】。
- mutations：對(duì)于 state 成員進(jìn)行同步修改操作（也可以支持異步操作）。
- actions：進(jìn)行異步操作，異步得到結(jié)果后通知 mutation 修改 state 成員。
- modules【模塊】：模塊化狀態(tài)管理，多狀態(tài)文件管理時(shí)使用，開發(fā)項(xiàng)目時(shí)多為多模塊項(xiàng)目在多模塊 vuex 中會(huì)有配置
namespaced:true開啟命名空間。
Vuex工作流程：
vue 組件會(huì)從 vuex 的 state 中獲取數(shù)據(jù)，當(dāng)組件修改數(shù)據(jù)時(shí)，會(huì)經(jīng)過以下流程：
-
當(dāng)觸發(fā)同步操作時(shí)：vue 組件通過 commit 方法通知 mutations （同時(shí) mutations 會(huì)在 Devtools 調(diào)試工具中記錄發(fā)生的操作）設(shè)置 state 數(shù)據(jù)，數(shù)據(jù)設(shè)置完成后，state 響應(yīng)式的讓組件重新渲染。
注意：vuex 存儲(chǔ)的數(shù)據(jù)是響應(yīng)式的，只要 state 中的數(shù)據(jù)發(fā)成改變，視圖就會(huì)重新渲染。
-
當(dāng)觸發(fā)異步操作時(shí)：vue 組件通過 dispatch 方法通知 actions 和 API【ajax調(diào)后端接口返回值】交互，從而得到數(shù)據(jù)，actions 得到數(shù)據(jù)之后通過 commit 方法通知 mutations （同時(shí) mutations 會(huì)在 Devtools 調(diào)試工具中記錄發(fā)生的操作）設(shè)置 state 數(shù)據(jù)，數(shù)據(jù)設(shè)置完成后，state 響應(yīng)式的讓組件重新渲染。
Devtools為vux官方提供的開發(fā)者調(diào)試工具，它跟Mutations進(jìn)行對(duì)話。
案例1：vuex求和
- 【
流程的第一步：從vc–通過派發(fā)dispatch(‘A’,value)–>actions】：我們看一下actions中jia(context, value)傳遞的兩個(gè)參數(shù)
子組件.vue【vc】
// 組件派發(fā)【dispatch】任務(wù)到actions
this.$store.dispatch('字符串的事件類型',要傳遞的數(shù)據(jù))
this.$store.dispatch('jia',this.n)
store/index.js中的actions部分【store】
//準(zhǔn)備actions——用于響應(yīng)組件中的動(dòng)作【接收組件派發(fā)過來的方法】
const actions = {
jia(context, value) {
console.log('actions中的jia被調(diào)用了')
context.commit('JIA',value)
console.log(context);
console.log(value);
},
};
-
第一個(gè)參數(shù)：context【像一個(gè)ministore】
- ministore中：有commit,dispatch,getters,state等等屬性，actions里的操作空間很大【比如：我想在actions中判斷一下state中存儲(chǔ)數(shù)據(jù)sum的奇偶性，那么可以這樣訪問
context.state.sum】
- ministore中：有commit,dispatch,getters,state等等屬性，actions里的操作空間很大【比如：我想在actions中判斷一下state中存儲(chǔ)數(shù)據(jù)sum的奇偶性，那么可以這樣訪問
- 第二個(gè)參數(shù)：value【
this.n】
- 【
流程的第二步：從actions/組件–通過commit(‘A/B’,value)–>mutations，并在mutations中操作state中的數(shù)據(jù)】：我們看一下mutations中JIA(state, value)傳遞的兩個(gè)參數(shù) - 當(dāng)我們不需要在actions中拿到后臺(tái)的數(shù)據(jù)時(shí)，可以省略第一步。
省略actions的情況：
子組件.vue【省略后的vc中】
// 組件派發(fā)【commit】任務(wù)到mutations
this.$store.commit('字符串的事件類型',要傳遞的數(shù)據(jù))
this.$store.commit('JIA',this.n)
store/index.js中的actions和mutations部分【省略后store的mutations中】
- actions中就不需要寫了，跳過actions這一步
const actions ={};
//準(zhǔn)備mutations——用于操作數(shù)據(jù)（state）
const mutations = {
JIA(state, value){
console.log('mutations中的JIA被調(diào)用了')
state.sum+= value
},
};
正常不省略actions的情況：
子組件.vue【不省略actions的vc中】
// 組件派發(fā)【dispatch】任務(wù)到actions
this.$store.dispatch('字符串的事件類型',要傳遞的數(shù)據(jù))
this.$store.dispatch('jia',this.n)
store/index.js中的actions和mutations部分【store】
//準(zhǔn)備actions——用于響應(yīng)組件中的動(dòng)作【接收組件派發(fā)過來的方法】
const actions = {
jia(context, value) {
console.log('actions中的jia被調(diào)用了')
context.commit('JIA',value)
},
};
//準(zhǔn)備mutations——用于操作數(shù)據(jù)（state）
const mutations = {
JIA(state, value){
console.log('mutations中的JIA被調(diào)用了')
state.sum+= value
console.log(state);
console.log(value);
}
};
- 第一個(gè)參數(shù)：state
- 第二個(gè)參數(shù)：value【
this.n】
vuex求和案例展示;
vuex求和案例完整代碼：
store/index.js中
//該文件用于創(chuàng)建Vuex中最為核心的store
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';
//應(yīng)用Vuex插件
Vue.use(Vuex);
//準(zhǔn)備actions——用于響應(yīng)組件中的動(dòng)作【接收組件派發(fā)過來的方法】
const actions = {
/* jia(context, value) {
console.log('actions中的jia被調(diào)用了')
context.commit('JIA',value)
},
jian(context,value){
console.log('actions中的jian被調(diào)用了')
context.commit('JIAN',value)
}, */
jiaOdd(context,value){
console.log('actions中的jiaOdd被調(diào)用了')
// 這里可以訪問到state里存儲(chǔ)的數(shù)據(jù) sum
if(context.state.sum % 2){
context.commit('JIA',value)
}
},
jiaWait(context,value) {
console.log('actions中的jiaWait被調(diào)用了')
setTimeout(() => {
context.commit('JIA',value)
}, 500);
},
};
//準(zhǔn)備mutations——用于操作數(shù)據(jù)（state）
const mutations = {
JIA(state, value){
console.log('mutations中的JIA被調(diào)用了')
state.sum+= value
},
JIAN(state,value){
console.log('mutations中的JIAN被調(diào)用了')
state.sum -= value
},
};
//準(zhǔn)備state——用于存儲(chǔ)數(shù)據(jù)
//數(shù)據(jù)，相當(dāng)于data
const state = {
sum: 0, //當(dāng)前的和
};
//創(chuàng)建并暴露store
export default new Vuex.Store({
// property 簡寫 (用在對(duì)象某個(gè) property 的 key 和被傳入的變量同名時(shí))
actions,
mutations,
state,
});
main.js
//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//引入vue-resource插件
import vueResource from 'vue-resource';
//引入store
import store from './store'
//關(guān)閉Vue的生產(chǎn)提示
Vue.config.productionTip = false
//使用插件
Vue.use(vueResource)
//創(chuàng)建vm
new Vue({
el:'#app',
render: h => h(App),
// property 簡寫 (用在對(duì)象某個(gè) property 的 key 和被傳入的變量同名時(shí))
// 把 store 對(duì)象提供給 “store” 選項(xiàng)，這可以把 store 的實(shí)例注入所有的子組件
store,
// 生命周期鉤子beforeCreate中模板未解析，且this是vm
beforeCreate() {
// this:指的是vm
Vue.prototype.$bus = this //安裝全局事件總線$bus
}
})
App.vue文章來源：http://www.zghlxwxcb.cn/news/detail-535188.html
<template>
<div>
<Count/>
</div>
</template>
<script>
import Count from './components/Count'
export default {
name:'App',
components:{Count},
mounted() {
// console.log('App',this)
},
}
</script>
Count.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-535188.html
<template>
<div>
<h1>當(dāng)前求和為：{{ $store.state.sum }}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">當(dāng)前求和為奇數(shù)再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
export default {
name: 'Count',
data() {
return {
n: 1,
};
},
methods: {
/* increment() {
// 組件派發(fā)【dispatch】任務(wù)到actions,然后在actions中觸發(fā)mutations中的方法
this.$store.dispatch('jia',this.n)
},
decrement() {
this.$store.dispatch('jian',this.n)
}, */
increment() {
// 組件派發(fā)【dispatch】任務(wù)到actions,然后在actions中觸發(fā)mutations中的方法
this.$store.commit('JIA', this.n);
},
decrement() {
this.$store.commit('JIAN', this.n);
},
incrementOdd() {
this.$store.dispatch('jiaOdd', this.n);
},
incrementWait() {
this.$store.dispatch('jiaWait', this.n);
},
},
mounted() {
console.log('Count', this);
},
};
</script>
<style scoped>
button {
margin-left: 10px;
}
select {
margin-left: 20px;
}
</style>
到了這里，關(guān)于前端vue入門(純代碼)21_vuex的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
