第一境界：刚开始学习使用vuex的时候一脸懵逼，最开始的理解是js的var一个全局变量，后来慢慢把它理解成localStorage并结合计算属性（computed）存值取值，它比localStorage好，一改动就能监听做出响应。
第二境界：vuex还能模块化
第三境界：后来发现vuex还能做异步请求数据
上面算是新手入门，具体请看 vuex官网 和 vue-element-admin
vue-element-admin里面已经有vuex的模块化、vuex异步请求数据、cookie保存登录信息。而这些在nuxtjs里怎么实现呢？
1
| 模块方式： store 目录下的每个 .js 文件会被转换成为状态树指定命名的子模块 （当然，index 是根模块）
|
官网这句话不好理解，还不如直接来个例子，在store下新建index.js和user.js（模块）
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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| // index.js
import { parse } from 'cookie-parse'
export const state = () => ({
counter: 0
})
export const mutations = {
increment(state) {
state.counter++
}
}
export const actions = {
// 这里是从服务端拿取cookie
nuxtServerInit({ commit }, { req }) {
const cookie = parse(req.headers.cookie)
// 主要这里提交的是user模块
commit('user/SET_TOKEN', cookie.token)
}
}
//user.js
import md5 from 'js-md5'
import { login, logout } from '~/api/user'
import defaultSettings from '~/utils/settings'
import { getToken, setToken, removeToken } from '~/utils/auth'
export const state = () => ({
// nuxtjs 由于服务端渲染这里的getToken()为undefined
// 需要在index.js里使用nuxtServerInit
token: getToken()
})
export const mutations = {
SET_TOKEN: (state, token) => {
state.token = token
}
}
export const actions = {
// user login
login({ commit }, userInfo) {
const { username, password } = userInfo
const loginData = {
username: username.trim(),
password: md5(password),
grant_type: defaultSettings.grant_type,
ip_address: defaultSettings.ip_address
}
return new Promise((resolve, reject) => {
login(loginData)
.then(response => {
commit('SET_TOKEN', response.access_token)
setToken(response.access_token)
// 把登录结果返回login页面
resolve(response)
})
.catch(error => {
reject(error)
})
})
},
// user logout
logout({ commit, state }) {
return new Promise((resolve, reject) => {
logout(state.token)
.then(() => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
.catch(error => {
reject(error)
})
})
},
// remove token
resetToken({ commit }) {
return new Promise(resolve => {
commit('SET_TOKEN', '')
removeToken()
resolve()
})
}
}
|
在组件里使用
1
2
3
4
5
| computed: {
token() {
return this.$store.state.user.token
}
}
|
需要的依赖
1
| npm i cookie-parse js-cookie
|
主要注释都在代码里写了，以上就基本解决了getToken()为undefined，和nuxt里vuex怎么模块化的问题
