vuex 补全官网教程上的代码

Action

< template>

< div id= "app">

< p> {{ counter }} </ p>

< p> {{ getEven }} </ p>

< button @click="increment">+</ button>

< button @click="incrementAsync">+</ button>

< button @click=" incrementBy({ amount: 10})">++</ button>

< button @click="groupAction">groupAction</ button>

</ div>

</ template>

< script>

import Vue from 'vue'

import Vuex,{ mapGetters } from 'vuex'

Vue.use(Vuex)

const store = new Vuex. Store({

state: {

count: 0

},

getters: {

getEven: ( state) => { return state.count % 2 === 0 ? state.count : state.count - 1 }

},

mutations: {

increment: ( state) => state.count += 1,

incrementBy: ( state, payload) => state.count += payload.amount

},

actions: {

increment( context) {

context.commit( 'increment')

},

incrementAsync({ commit }) {

setTimeout(() => {

commit( 'increment')

}, 1000);

},

incrementBy( { commit }, amount ) {

setTimeout(() => {

commit( 'incrementBy', amount)

}, 1000);

},

actionA( { commit } ) {

return new Promise(( resolve, reject) => {

setTimeout(() => {

commit( 'increment')

resolve()

}, 1000);

})

}

}

})

import { mapActions, mapState } from 'vuex'

export default {

store, //映射之前需先注入store

computed: {

... mapState({

counter: state => state.count //展开方式映射state

}),

... mapGetters([ 'getEven']) //展开方式映射getters

},

methods: {

groupAction: () => store.dispatch( 'actionA') . then(() => store.dispatch( 'actionA')) //组合Action

,

... mapActions([ 'increment', 'incrementAsync', 'incrementBy']) // 映射actions 普通方式和载荷方式

}

}

</ script>

模块的局部状态

< template>

< div id= "app">

< p> (a+b)*2 = {{ count }} </ p>

< p> moduleA: {{ count1 }} </ p>

< p> rootState: {{ count2 }} </ p>

< p> getters: {{ counter }} </ p>

< button @click="increment">+</ button>

< button @click="incrementIfOddOnRootSum">和为奇数才增加</ button>

</ div>

</ template>

< script>

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {

state: { count: 1 },

mutations: {

increment: ( state) => state.count ++

},

getters: {

doubleCount: ( state, getters, rootState) => (state.count + rootState.count) * 2

},

actions: {

incrementIfOddOnRootSum( { state, commit, rootState } ) { //state = context.state rootState = context.rootState 参数的位置不可变

if ( (state.count + rootState.count) % 2 == 1 ) {

commit( 'increment')

}

}

}

}

const store = new Vuex. Store({

state: {

count: 3

},

modules: {

a: moduleA

}

})

import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'

export default {

store,

computed: {

... mapState({

count: () => store.getters.doubleCount,

count1: ( state) => state.a.count,

count2: ( state) => state.count

}),

counter( state) {

return this.$store.state.a.count + state.count

}    

    // with namespaced:true 更高的封装度和复用性

// counter() {

// return store.state.a.count + store.state.count

// }

},

methods: {

... mapMutations({

increment: ({ commit }) => store.commit( 'increment')

}),

    // increment: ({ commit }) => store.commit('a/increment')

... mapActions({

incrementIfOddOnRootSum: ({ dispatch }) => store.dispatch( 'incrementIfOddOnRootSum')

    // incrementIfOddOnRootSum: ({ dispatch }) => store.dispatch('a/incrementIfOddOnRootSum')

})

}

}

</ script>

在带命名空间的模块内访问全局内容（Global Assets）

< template>

< div id= "app">

< p> {{ together }} </ p>

< button @click="trigger">triggerAll</ button>

</ div>

</ template>

< script>

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const moduleA = {

namespaced: true,

state: { count: 1 },

getters: {

double: ( state, getters, rootState, rootGetters) => state.count * 2,

together: ( state, getters, rootState, rootGetters) => state.count + rootState.count + getters.double + rootGetters.double

},

mutations: {

increment: ( state) => state.count ++

},

actions: {

Act: ({ commit }) => commit( 'increment'),

togetherActions: ({ dispatch, commit, getters, rootGetters }) => {

dispatch( 'Act')

dispatch( 'Act', { root: true })

commit( 'increment')

commit( 'increment', { root: true })

}

}

}

const store = new Vuex. Store({

state: { count: 8 },

getters: {

double: ( state) => state.count * 2

},

Act: ({ commit }) => commit( 'increment'),

mutations: {

increment: ( state) => state.count += 2

},

modules: {

moduleA

}

})

import { mapGetters, mapState, mapMutations, mapActions } from 'vuex'

export default {

store,

computed: {

... mapGetters( 'moduleA', [

'together'

])

},

methods: {

... mapActions( 'moduleA', [

'togetherActions'

])

}

}

</ script>