Vuex的使用參考上篇文章 15.Vuex使用
為什么要分模塊：
由于使用單一狀態(tài)樹抹缕，應用的所有狀態(tài)會集中到一個比較大的對象炫刷。當應用變得非常復雜時祭隔，store 對象就有可能變得相當臃腫惠猿。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）挠进。每個模塊擁有自己的 state矾麻、mutation、action波岛、getter茅坛、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
案例：
1. 在src/main.js中使用vuex
....
省略vue等其他導入
....
// 導入vuex
import store from './store/modules'
// 實例化vue，將vuex傳入vue中
new Vue({
...
store,
...
});
2.在src/store/modules.js中配置vuex
// 導入vue
import Vue from 'vue';
// 導入vuex
import Vuex from 'vuex';
// 使用vuex
Vue.use(Vuex);
//導入各個業(yè)務模塊
import card from './card'
import photo from './card'
//構造store
const store = new Vuex.Store({
// 模塊化
modules: {
card: card,
photo: photo
// 如果還有其他模塊依此寫入
}
});
// 導出store
export default store;
3. src/store/card/index.js (卡功能)
const card = {
/**
* 定義命名空間盆色，防止多個模塊同名共享灰蛙，使用時需要帶上命名空間
*/
namespaced: true,
state: {
cardArr: [],
},
mutations: {
addCard(state, obj){
state.cardArr.push(obj);
}
},
actions: {
addCardFun(store, obj){
store.commit('addCard', obj);
}
}
}
//導出
export default card;
4.src/store/photo/index.js (照片功能)
const state = {
photoArr: []
}
const mutations = {
addPhoto(state, obj){
state.photoArr.push(obj);
}
}
const actions = {
addPhotoFun({commit}, obj){
commit('addPhoto', obj)
}
}
const photo = {
/**
* 定義命名空間，防止多個模塊同名共享
*/
namespaced: true,
state: state,
mutations: mutations,
actions: actions
}
export default photo;
5.src/page/store/modules.vue
<template>
<div>
組件顯示：
<sotre-vue></sotre-vue>
<br><br>
本頁面vuex 模塊化：<br><br>
顯示卡列表：<button @click="aCard">追加卡信息</button>
<ul>
<li v-for="(result, index) in cardArr" :key="index">
卡號：{{result.no}} <br>
昵稱：{{result.name}}
</li>
</ul>
<br><br>
顯示圖片：<button @click="aPhoto">添加圖片</button>
<ul>
<li v-for="(result, index) in photoArr" :key="index">
ID：{{result.no}} <br>
昵稱：{{result.name}}
</li>
</ul>
</div>
</template>
<script>
// 導入state隔躲、mapMutations摩梧、actions
import { mapState, mapMutations, mapActions } from 'vuex';
// 導入mutations
//import { mapMutations } from 'vuex'
// 導入actions
//import { mapActions } from 'vuex'
// 導入子組件
import storeVue from './storeVue'
export default {
data(){
return {
}
},
computed:{
// 映射帶有命名空間的state，第一個參數(shù)模塊名
...mapState('card', {
cardArr: state => state.cardArr
}),
...mapState('photo', {
photoArr: state => state.photoArr
})
},
methods: {
// 映射帶有命名空間的mutations宣旱，第一個參數(shù)模塊名
...mapMutations('card' ,[
'addCard',
]),
...mapMutations('photo', [
'addPhoto'
]),
// 映射帶有命名空間的actions仅父，第一個參數(shù)模塊名
...mapActions('card', [
'addCardFun'
]),
...mapActions('photo', [
'addPhotoFun'
]),
aCard(){
var rand = (Math.random(10) * 100).toFixed();
var data = {name: 'zs'+rand, no: '62244000'+rand}
// mapMutations 提交時需要帶上命名空間()
//this.$store.commit('card/addCard', data);
//this.addCard(data);
// 通過actions調(diào)用
//this.$store.dispatch('card/addCardFun', data)
this.addCardFun(data);
},
// 添加圖片
aPhoto(){
var rand = (Math.random(10) * 100).toFixed();
var data = {name: 'photo'+rand, no: '62244000'+rand}
// 提交muations
//this.$store.commit('photo/addPhoto', data);
//this.addPhoto(data);
// 調(diào)用actions
//this.$store.dispatch('photo/addPhotoFun', data);
this.addPhotoFun(data);
}
},
// 導入組件
components: {
//
storeVue
}
}
</script>
6.子組件src/page/vuex/storeVue.vue
<template>
<div>
storeVue 組件：<br><br>
顯示card： {{$store.state.card.cardArr}}<br><br>
顯示photo：{{$store.state.photo.photoArr}}
<hr/>
</div>
</template>
<script>
export default {
data(){
return {
}
}
}
</script>
