Vuex

1
const actions = {
2
  actionName (context, value) {
3
    commit('对应的mutationsName', value)
4
  }
5
 }
6
第一个参数：context对象
7
包含：{
8
    state,      // 等同于 `store.state`，若在模块中则为局部状态
9
    rootState,  // 等同于 `store.state`，只存在于模块中
10
    commit,     // 等同于 `store.commit`
11
    dispatch,   // 等同于 `store.dispatch`
12
    getters,    // 等同于 `store.getters`
13
    rootGetters // 等同于 `store.getters`，只存在于模块中
14
}
15
第二个参数： 可以为任意类型，但最后都会包装成一个对象

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3
Vue.use(Vuex)
4

5
const moduleA = {
6
    namespaced:true,//开启命名空间
7
    state: {},
8
    mutations: {},
9
    actions: {},
10
    getters: {},
11
}
12
const moduleB = {
13
    namespaced:true,//开启命名空间
14
    state: {},
15
    mutations: {},
16
    actions: {},
17
    getters: {},
18
}
19
const store = new Vuex.Store({
20
    modules: {
21
        moduleA: moduleA,
22
        moduleB: moduleB,
23
        // ES6 简写
24
        // moduleA,
25
        // moduleB,
26
    },
27
})
28
store.state.moduleA // -> moduleA 的状态
29
store.state.moduleB // -> moduleB 的状态

1
<template>
2
    <div>
3
        <h1>当前求和为：{{ sum }}</h1>
4
        <h3>当前求和放大10倍为：{{ bigSum }}</h3>
5
        <h3>年龄：{{ age }}</h3>
6
        <h3>姓名：{{ name }}</h3>
7
        <select v-model.number="n">
8
            <option value="1">1</option>
9
            <option value="2">2</option>
10
            <option value="3">3</option>
11
        </select>
12
        <!-- 用了mapActions 和 mapMutations 的话要主动传参 -->
13
        <button @click="increment(n)">+</button>
14
        <button @click="decrement(n)">-</button>
15
        <button @click="incrementOdd(n)">当前求和为奇数再加</button>
16
        <button @click="incrementWait(n)">等0.5s再加</button>
17
    </div>
18
</template>
19

20
<script>
21
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
22
    export default {
23
        name: 'Count',
24
        data() {
25
            return {
26
                n: 1, //用户选择的数字
27
            }
28
        },
29
        computed: {
30
            ...mapState(['sum', 'age', 'name']),
31
            ...mapGetters(['bigSum']),
32
        },
33
        methods: {
34
            ...mapActions({ incrementOdd: 'sumOdd', incrementWait: 'sumWait' }),
35
            ...mapMutations({ increment: 'sum', decrement: 'reduce' }),
36
        },
37
        mounted() {
38
            console.log('Count', this)
39
        },
40
    }
41
</script>

1
import Vue from 'vue'
2
import Vuex from 'vuex'
3

4
Vue.use(Vuex)
5

6
const addCountOptions = {
7
    namespaced: true, //开启命名空间
8
    actions: {
9
        jiaWait(context, value) {
10
            setTimeout(() => {
11
                if (context.state.sum % 2 != 0) {
12
                    context.commit('JIA', value)
13
                }
14
            }, 500)
15
        },
16
    },
17
    mutations: {
18
        JIA(state, value) {
19
            context.sum += value
20
        },
21
        JIAN(state, value) {
22
            context.sum -= value
23
        },
24
    },
25
    state: {
26
        sum: 0,
27
        name: 'tom',
28
    },
29
    getters: {
30
        bigSum(state) {
31
            return state.sum * 10
32
        },
33
    },
34
}
35

36
export default new Vuex.Store({
37
    modules: {
38
        addCountOptions,
39
    },
40
})