Vue2.7 setup 中使用vue-router、vuex

文章首发于 Vue2.7 setup 中使用vue-router、vuex 。

Vue 2.7，中文版可产看 Vue 2.7 正式发布，代号为 Naruto 。

使用 Vue CLI 创建的新项目项目，vue/vue-router/vuex的版本对应如下：

{
  "dependencies": {
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
}
1
2
3
4
5
6
7

查看 yarn.lock 来看下具体安装版本号如下：

vue@^2.6.11:
  version "2.7.14"
  resolved "https://registry.npmmirror.com/vue/-/vue-2.7.14.tgz#3743dcd248fd3a34d421ae456b864a0246bafb17"
  integrity sha512-b2qkFyOM0kwqWFuQmgd4o+uHGU7T+2z3T+WQp8UBjADfEv2n4FEMffzBmCKNP0IGzOEEfYjvtcC62xaSKeQDrQ==
  dependencies:
    "@vue/compiler-sfc" "2.7.14"
    csstype "^3.1.0"

vue-router@^3.2.0:
  version "3.6.5"
  resolved "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz#95847d52b9a7e3f1361cb605c8e6441f202afad8"
  integrity sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==

vuex@^3.4.0:
  version "3.6.2"
  resolved "https://registry.npmmirror.com/vuex/-/vuex-3.6.2.tgz#236bc086a870c3ae79946f107f16de59d5895e71"
  integrity sha512-ETW44IqCgBpVomy520DT5jf8n0zoCac+sxWnn+hMe/CzaSejb/eVw2YToiXYX+Ex/AuHHia28vWTq4goAexFbw==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

也就是当前安装 Vue 2.7.14 版本，支持

• 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

在项目中在创建一个页面用于选项式API的书写，查看 vue-router 和 vuex 是否使用正常：

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
45
46
47
48
49

经过测试，两者功能均正常，但是在组合式API中 vuex 的 mapState, mapGetters, mapActions 和 mapMutations 辅助函数是无法使用的。

要在 vue devtools 查看页面中的内容信息，需要将 vue devtools 升级到 6.2.0 以上版本。

参考：

1. 前端vue2.6升级至vue2.7后如何使用旧版本vue-router与vuex，并且修改vuex