import Vue from "vue" import Vuex from "vuex" Vue.use(Vuex) const state = { //定義訪問狀態對象 count : 44 } const mutations = { //定義觸發狀態對象方法,傳入state整個對象 jia(state) { state.count ++ } } const getters = { //相似計算屬性,對state的數據進行復雜的邏輯計算,使用return返回結果 count : function (state){ return state.count += 100 } } const actions = { //異步執行方法,傳入參數context,等同於整個store jianplus (context) { context.commit("jia",10) //調用mutations中的方法並傳參 } testplus ({commit}) { //簡寫方式,使用{} 單獨傳入mutations對象 commit(‘jian’) //調用mutations中的方法 }
three({commit,dispatch}){ //使用dispatch調用actions的方法
return dispatch('testplus').then(()=>{
commit('jianplus')
})
} }, Const moduleA = { //定義一個模塊,引入各個狀態對象或方法 state, mutations, getters, actions } export default new Vuex.Store ({ //沒有使用模塊時的寫法 state, mutations, gettrts, actions }) // export default new Vuex.Store ({ //使用模塊時的寫法 // modules : { // a : moduleA //引入定義模塊 // } // })
如何在HTML中訪問:當未引入 mapState時,可經過$store去訪問 引入時按照正常的變量使用vue
<h1>{{$store.state.count}}</h1> //經過$store去訪問
在vue文件中的定義:在計算屬性computed位置進行引用,使用mapStatevuex
import {mapState } from ‘Vuex’ //引入 mapState export default { name: 'test', data: () => ({ test: '', }), methods: { }, // computed: mapState([ //直接使用state中定義的count 注意這裏是一個數組 // "count" // ]) computed: mapState({ //對state中定義的count作運算後再使用 注意這裏是一個對象 count : state => state.count+1 }) }
如何使用:跟事件觸發方法同樣跟在各類事件以後,經過commit方法觸發 數組
<button type="button" @click="$tore.commit(「jia」)"></button>
如何傳參:括號內第一個值爲方法名,後面爲傳入參數,傳入的參數能夠爲一個對象異步
<button type="button" @click="$tore.commit(「jia」,10)"></button>
在vue文件中的定義:在定義方法methods位置進行引用,使用mapMutationsthis
import {mapState,mapMutations} from ‘Vuex’ //引入 mapMutations export default { name: 'test', data: () => ({ test: '', }), methods:mapMutations([ //定義mutations中的各個方法 ‘jia’, ‘jian’ ]) computed: mapState({ //對state中定義的count作運算後再使用 count : state => state.count+1 }) }
在vue文件中的定義:在計算屬性computed位置進行引用,使用mapGettersspa
computed : { //vue文件中只能有一個computed,同時定義state時,須要改變寫法 ...mapState ({ //注意使用... "count」 }), count () { //調用getters中的count方法,將值return出去 return this.$store.getters.count }
簡化寫法:引入mapGetterscode
import {mapState,mapMutations,mapGetters} from ‘Vuex’ //引入 mapGetters export default { name: 'test', data: () => ({ test: '', }), methods:mapMutations([ //定義mutations中的各個方法 ‘jia’, ‘jian’ ]) computed : { //vue文件中只能有一個computed,同時定義state時,須要改變寫法 ...mapState ({ //注意使用... "count」 }), ...mapGetters([ //調用getters中的count "count」 ]) } }
在vue文件中的定義:在定義方法methods位置進行引用,使用mapActions 也能夠經過dispatch方法觸發 對象
import {mapState,mapMutations,mapGetters,mapActions} from ‘Vuex’ //引入 mapActions export default { name: 'test', data: () => ({ test: '', }), methods:{ ...mapMutations([ ‘jia’, ‘jian’ ]), ...mapActions([ //引入actions中定義的jiaplus方法 ‘jiaplus’ ]) } computed : { ...mapState ({ "count」 }), ...mapGetters([ "count」 ]) } }
<button type="button" @click="$tore.dispatch(「jiaplus」)"></button>
dispatch表明的是actions的整個對象,咱們能夠經過在其中一個actions中傳入dispatch觸發其餘的actions方法,會有一個返回值
actions: { actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) }, actionB ({ dispatch, commit }) { // 組合,傳入dispatch 調用actions的其餘方法 return dispatch('actionA').then(() => { commit('someOtherMutation') }) } }