真正掌握vuex的使用方法(七)----完結
今天是關於vuex的最後一篇文章了!怎麼說呢?且行且珍惜吧!!認真嘗試每一行程式碼!
之前的文章當中,我們把所有的資料都存放到了 vuex資料夾當中的store.js當中。但隨著將來專案的複雜度增大,共享的狀態越來越多,越來越複雜!在這個時候我們需要將狀態根據功能來對其進行模組化,同時也是為了便於將來的維護,所以分開寫會更好一些。
今天我們主要來學習一下module:狀態管理器的模組化操作。
假如專案中包括兩個模組,分別為廣告模組與使用者模組。
首先在src資料夾下新建一個vuex資料夾,然後在該資料夾下新建一個index.js檔案用於生成Store物件。然後在vuex資料夾下新建adv與user資料夾,最後分別在這兩個資料夾內建立一個index.js檔案。如圖
vuex/adv/index.js檔案存放的是廣告模組的內容。程式碼為:
//在該檔案中可以單獨設定adv相關的狀態
const state={
//定義狀態資料userName
advName:"我是一個通欄廣告!"
}
export default {
state,//將state進行輸出
}
vuex/user/index.js檔案存放的是使用者模組內容。程式碼為:
//在該檔案中可以單獨設定user相關的狀態
const state={
//定義狀態資料userName
userName:"張培躍"
}
export default {
state,//將state進行輸出
}
在vuex/index.js中引入剛才定義的兩個模組,並通過modules匯出:
import Vue from 'vue';//引入vue
import Vuex from 'vuex';//引入vuex
import axios from "axios";
import adv from "./adv";//引入vuex的adv模組
import user from "./user";//引入vuex的user模組
Vue.use(Vuex);//使用vuex
export default new Vuex.Store({//暴露Store物件
modules:{
adv,//adv狀態
user//user狀態
}
})
配置main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex'//匯入vuex,index.js為預設選 中資料夾,在此可以省略
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
store,//新增store
components: { App },
template: '<App/>'
})
在模板中使用的格式為$store.state.模組名.state屬性名:
<div id="app">
<p>advName:{{$store.state.adv.advName}}</p>
<p>userName:{{$store.state.user.userName}}</p>
</div>
輸出的格式可以簡化,將computed(計算屬性)調整下:
export default {
name: 'App',
computed:{
advName(){
return this.$store.state.adv.advName;
},
userName(){
return this.$store.state.user.userName;
}
}
}
然後模組中直接呼叫計算屬性即可:
<div id="app">
<p>advName:{{advName}}</p>
<p>userName:{{userName}}</p>
</div>
或者通過mapState來對computed進行設定,首先引入mapState:
import {mapState} from "vuex";
然後修改computed:
export default {
name: 'App',
computed:{
...mapState({
advName(state){
console.log(state);
return state.adv.advName;
},
userName(state){
return state.user.userName;
}
})
}
}
最後在頁面中渲染的內容為:
advName:我是一個通欄廣告!
userName:張培躍
接下來,我們來看一下如何通過mutation改變狀態值。
首先在adv/index.js中新增一個mutation方法SET_ADVNAME用於改變advName狀態:
const mutations={
//state為當前狀態物件,v為按收的值
SET_ADVNAME(state,v){
state.advName=v;
}
}
在模板中呼叫,直接通過$store.commit(‘方法名’,傳遞引數)。
<div id="app">
<p>advName:{{advName}}</p>
<p>userName:{{userName}}</p>
<p><input type="button" value="改變advName" @click="$store.commit('SET_ADVNAME','我是一個富媒體廣告')"></p>
</div>
現在,在user/index中也新增一個mutation方法SET_ADVNAME,這次改變的是userName狀態:
const mutations={
//state為當前狀態物件,v為按收的值
SET_ADVNAME(state,v){
state.userName=v;
}
}
最後點選按鈕,你會發現兩個模組中的SET_ADVNAME均被觸發了!這說明mutation是不區分模組的。如果在不同模組中的mutation出現同名的方法,都會執行。
getters與actions與之前的定義與調取是一樣的,在此就不再描述了!
關於vuex共七篇文章,已完結!希望可以對各位學習vuex有所幫助!
作業:
- 嘗試getters與actions的定義與調取.
- 嘗試getters與actions出現同名,結果會怎樣?(嘗試一下,估計和你想的不一樣哦)