1. 程式人生 > >Vuex的基本方法

Vuex的基本方法

1、Vuex是中心狀態管理方案,Vuex裡面的store相當於一個倉庫,用來儲存資料的。
2、const store = new Vuex.Store({
state:{}, //呼叫 this. s t o r e . s

t a t e . m u t
a t i o n s : , / / t
h i s . store.state.屬性名 mutations:{}, //this. store.commit(“方法名”,引數) 同步呼叫
getters:{}, //this. s t o r e . g e t t e r s ( " " ) a c t i o n : / / t h i s . store.getters("方法名",引數) action:{} //this. store.dispatch(“方法名”,引數) 非同步呼叫
})
3、給物件新增新屬性
Vue.set(obj,‘newprop’,123)
state.obj ={…state.obj,newprop:123}
4、只要store.state裡面的值發生改變,就會立即觸發更新相關聯的dom,也會重新計算store.getters
5、使用mapState
import {mapState} from ‘vuex’
export default{
computed:mapState({
count:state=>state.count,
countAlias:‘count’ //state=>state.count
})
}
呼叫方法:this.count()相當於this. s t o r e . g e t t e r s ( ) 6 使 m u t a t i o n i m p o r t m a p M u t a t i o n f r o m v u e x e x p o r t d e f a u l t m e t h o d s : m a p M u t a t i o n ( [ i n c r e a m e n t , i n c r e a m e n t l y ] ) 調 t h i s . i n c r e a m e n t ( ) t h i s . store.getters() 6、使用常量代替mutation事件型別 import {mapMutation} from 'vuex' export default{ methods:{ mapMutation([ 'increament','increamently' ]) } } 呼叫方法:this.increament()相當於this. store.commit()
7、分發action 使用store.dispatch
action提交給mutation,mutation更改state值