關(guān)于VueX
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理工具
大型項目使用為解決組件之間傳遞數(shù)據(jù)
之前處理方法:
- 父子組件傳值、平行組件在跳轉(zhuǎn)時牺汤，利用url浑度，路由里的傳
- 模式非常脆弱火架，通常會導(dǎo)致無法維護的代碼
vueX的作用
- vuex能夠保存全局數(shù)據(jù)，供整個應(yīng)用使用
- vuex保存的數(shù)據(jù)是響應(yīng)式的
- vuex保存的數(shù)據(jù)可以跟蹤狀態(tài)的變化
使用步驟
- 安裝
npm install vuex –save
- 創(chuàng)建對象 ./src/store/index.js下
//引入vueX
import Vuex from 'vuex'
//把vueX安裝到Vue里
Vue.use(Vuex)
export default new Vuex.Store({
state:{},
getters:{},
mutations:{},
actions:{}
})
- 將vueX.store對象植入到vue的根屬性 ./src/main.js
import store from './store'
new Vue({
el: '#app',
store
})
- 組件獲取數(shù)據(jù)
//模板里：
$store.state.id
//腳本里
this.$store.state.id
vueX的核心概念：
04185834_TAxe.png
state : 數(shù)據(jù)倉庫 抑胎，存儲所有的 共享數(shù)據(jù)，相當于vue組件里的data 存放狀態(tài)
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
}
......
});
<!--獲取-->
{{$store.state.age}}
{{$store.state.isAdult}}
{{$store.state.isAllowMarry?"可以結(jié)婚了":"不要著急渐北，再等等"}}
//對state對象中添加一個age成員
Vue.set(state,"age",15)
//將剛剛添加的age成員刪除
Vue.delete(state,'age')
Getter ： 在state的基礎(chǔ)上派生的數(shù)據(jù)阿逃， 相當于vue組件里 computed 加工state成員給外界
Getters中的方法有兩個默認參數(shù)
- state 當前VueX對象中的狀態(tài)對象
- getters 當前getters對象，用于將getters下的其他getter拿來用
export default new VueX.Store({
state:{
age:12,
},
getters:{
ageChina:state=>{
let shi = parseInt(state.age/10); //1
let ge = state.age%10;//2
let str = "";
switch(shi){
case 1:str='一';break;
case 2:str='二';break;
}
return str;
}
}
});
//獲取
{{$store.getters.ageChina}}
Mutation：修改state的數(shù)據(jù)時腔稀，用mutation盆昙，這與跟蹤狀態(tài) 有關(guān)系 模塊化狀態(tài)管理
mutations方法都有默認的形參：
- ([state] [,payload])
- state是當前VueX對象中的state
- payload是該方法在被調(diào)用時傳遞參數(shù)使用的
export default new VueX.Store({
state:{
age:12,
isAdult:"未成年",
isAllowMarry:false
},
// mutations：是跟蹤狀態(tài)。這里面只能有同步代碼
mutations:{
incAge(state,num){
state.age+=num;
}
});
Action：解決mutation里只能有同步代碼的問題action里可以有異步代碼
Actions中的方法有兩個默認參數(shù)
- context 上下文(相當于箭頭函數(shù)中的this)對象
- payload 掛載參數(shù)
actions:{
aEdit(context,payload){
setTimeout(()=>{
context.commit('incAge',payload)
},2000)
}
}
提交mutation（如果有異步就在action提交焊虏，如果沒有異步就在組件里提交）
//組件里提交
$store.commit('incAge',num);
$store.commit('incAge',{ num:111 });
$store.commit({
type:'incAge',
payload:{
age:15,
sex:'男'
}
});
//action提交
$store.dispatch("incAge",num)
Action和mutation的區(qū)別
- 在代碼的角度上淡喜，action是來提交mutation的
- 在用途上：區(qū)分 actions 和 mutations
- 并不是為了解決靜態(tài)問題，而是為了能用 devtools 追蹤狀態(tài)變化诵闭。 vuex 真正限制你的只有 mutation 必須是同步的這一點炼团。
關(guān)于Module
如果項目大的話全局數(shù)據(jù)太多會混亂，可以分類處理疏尿，分模塊
./src/store/moduleA.js
export default {
state: {count:1},
mutations: { ... },
actions: {
incCount(context){
console.log("moduleA的action");
setTimeout(()=>{
context.commit("incCount");
},2000);
}
},
getters: { ... }
}
./src/store/moduleB.js
export default {
state: {count:2},
mutations: { ... },
actions: {
incCount(context){
console.log("moduleB的action");
setTimeout(()=>{
context.commit("incCount");
},2000);
}
},
getters: { ... }
}
在總的store里包含所有的模塊：
import Vue from "vue";
import vueX from "vuex";
import moduleA from "./moduleA";
import moduleB from "./moduleB";
Vue.use(vueX);
export default new vueX.Store({
modules:{
moduleA:moduleA,
moduleB:moduleB
}
//簡寫：
modules:{
moduleA,moduleB
}
});
使用
store.state.moduleA.count // -> moduleA 的狀態(tài)
store.state.moduleB.count // -> moduleB 的狀態(tài)
模塊（Module）里的命名空間（namespaced:true）
模塊具有更高的封裝度和復(fù)用性瘟芝，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。當模塊被注冊后褥琐，它的所有 getter锌俱、action 及 mutation 都會自動根據(jù)模塊注冊的路徑調(diào)整命名。
export default {
namespaced:true,
state:{
count:1
},
mutations:{
},
actions:{
}
}
派發(fā)action時敌呈，加上模塊名
this.$store.dispatch('moduleA/incCount');
vuex中mapState贸宏、mapMutations造寝、mapAction的理解
https://blog.csdn.net/wangguoyu1996/article/details/80573113
