1，入门案例

安装库。

npm install vuex@3

新建store.js。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        }
    }
})

export default store

main.js。

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

最后，计数器案例。

<template>
  <h1 @click="add">{{ $store.state.count }}</h1>
</template>

<script>
export default {
  name: 'App',
  methods: {
    add() {
      this.$store.commit('increment')
    }
  }
}
</script>

效果：

辅助函数

可以将数据自动变成计算属性。

<template>
  <h1 @click="add">{{ count }}</h1>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: 'App',
  methods: {
    add() {
      this.$store.commit('increment')
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

2，mutations传参

跟着后面写就行，只能传一个参数。

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v
        }
    }
})

this.$store.commit('increment', 5)

辅助函数

可以将mutations自动变成方法。

<template>
  <h1 @click="increment(5)">{{ count }}</h1>
</template>

<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: 'App',
  methods: {
    ...mapMutations(['increment'])
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

3，actions

异步操作数据。

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v
        }
    },
    actions: {
        incrementAction(context, v) {
            setTimeout(() => {
                context.commit('increment', v)
            }, 1000)
        }
    }
})

this.$store.dispatch('incrementAction', 5)

辅助函数

可以将actions自动变成方法。

<template>
  <h1 @click="incrementAction(5)">{{ count }}</h1>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";
export default {
  name: 'App',
  methods: {
    ...mapActions(['incrementAction']),
    ...mapMutations(['increment'])
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

4，getters

派生状态，类似于计算属性。

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v
        }
    },
    actions: {
        incrementAction(context, v) {
            setTimeout(() => {
                context.commit('increment', v)
            }, 1000)
        }
    },
    getters: {
        count1(state) {
            return state.count + "个"
        }
    }
})

$store.getters.count1 

辅助函数

可以将getters自动变成计算属性。

<template>
  <h1 @click="incrementAction(5)">{{ count1 }}</h1>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from "vuex";
export default {
  name: 'App',
  methods: {
    ...mapActions(['incrementAction']),
    ...mapMutations(['increment'])
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['count1'])
  }
}
</script>

5，模块拆分

新建a.js。

新增了一个配置项namespaced。

export default {
    namespaced: true,
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v
        }
    },
    actions: {
        incrementAction(context, v) {
            setTimeout(() => {
                context.commit('increment', v)
            }, 1000)
        }
    },
    getters: {
        count1(state) {
            return state.count + "个"
        }
    }
}

b.js。

export default {
    namespaced: true,
    state: {
        count: 0
    },
    mutations: {
        increment(state, v) {
            state.count += v
        }
    },
    actions: {
        incrementAction(context, v) {
            setTimeout(() => {
                context.commit('increment', v)
            }, 1000)
        }
    },
    getters: {
        count1(state) {
            return state.count + "个"
        }
    }
}

改写store.js。

const store = new Vuex.Store({
    modules: {
        a, b
    }
})

6，访问子模块的state

$store.state.a.count
$store.state.b.count

辅助函数

<template>
  <div>
    <h1>{{ count }}</h1>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState('a', ['count'])
  }
}
</script>

7，访问子模块的getters

$store.getters['a/count1']
$store.getters['b/count1']

辅助函数

用法与前面一致。

8，访问子模块的mutations

this.$store.commit('a/increment', 1)

辅助函数

用法与前面一致。

9，访问子模块的actions

this.$store.dispatch('a/incrementAction', 1)

辅助函数

用法与前面一致。