• 流程图
  

在src文件夹下，创建store文件夹；
在store文件夹下，创建index.js文件；

store/index.js

完整代码

import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

const actions = {
    incrementWait(context, value) {
        setTimeout(() => {
            context.commit("JIA", value)
        }, 1000);
    }
};

//准备mutations——用于操作数据（state）
const mutations = {
    JIA(state, value) {
        state.sum += value;
    },
};

//准备state——用于存储数据
const state = {
    sum: 0,
    school: "HB",
    subject: "Vue",
};

const getters = {
    bigSum(state) {
        return state.sum * 10
    }
}

//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

main.js

在 main.js 中导入 store

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

new Vue({
	el: '#app',
	store,
	render: h => h(App)
})
1
2
3
4
5
6
7
8
9
10

Count组件

<template>
  <div>
    <h1>当前求和为：{{ sum }}</h1>
    <h3>当前求和放大10倍为：{{ bigSum }}</h3>
    <h3>我在{{ school }}，学习{{ subject }}</h3>
    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(n)">+</button>
    <button @click="incrementWait(n)">等一等再加</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  name: "Count",
  data() {
    return {
      n: 1, //用户选择的数字
    };
  },
  computed: {
    ...mapState(["sum", "school", "subject"]),
    ...mapGetters(["bigSum"]),
  },
  methods: {
    ...mapMutations({ increment: "JIA" }),
    ...mapActions(["incrementWait"]),
  },
  mounted() {
    console.log("sum: ", this.$store.state.sum);
  },
};
</script>

<style lang="css">
button {
  margin-left: 5px;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

mapState

当前求和为：{{ sum }}
我在{{ school }}，学习{{ subject }}
1
2

获取state中数据的方法，使用计算属性computed：
方式一：

sum(){
	return this.$store.state.sum
},
school(){
	return this.$store.state.school
},
subject(){
	return this.$store.state.subject
}, 
// 获取getters中的数据
bigSum(){
				return this.$store.getters.bigSum
},
1
2
3
4
5
6
7
8
9
10
11
12
13

方式二：
导入

<script>
	import {mapState,mapGetters, mapMutations} from 'vuex'
</script>
1
2
3

//借助mapState生成计算属性，从state中读取数据。（对象写法）
// ...mapState({sum:'sum',school:'school',subject:'subject'}),

//借助mapState生成计算属性，从state中读取数据。（数组写法）
...mapState(['sum','school','subject']),
1
2
3
4
5

数组写法可认为是对象写法的简写形式

【注意】：

{sum:'sum',school:'school',subject:'subject'}
1

不能简写成：

{sum,school,subject}
1

{sum,school,subject} 指的是：

{sum:sum,school:school,subject:subject}
1

sum:'sum' : 'sum' 是字符串；sum: sum : sum 是对象；

mapMutations

跳过dispatch，直接commit到mutations, method中，increment等方法的简写形式：

increment()需要接收参数

<button @click="increment(n)">+</button>
1

...mapMutations({ increment: "JIA" }),
1

increment 与JIA，同名时，也可采用数组的简写形式

mapActions

借助mapActions生成对应方法，方法中会调用dispatch联系actions

...mapActions(["incrementWait"]),
1

【注意】: "incrementWait"，incrementWait需要加""

参考资料

• 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 张天禹