Skip to content

Commit 8e23050

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
vuex
1 parent 6011ab2 commit 8e23050

File tree

4 files changed

+123
-167
lines changed

4 files changed

+123
-167
lines changed

‎12-前端框架/06-vue/24-深入细化学习/14-vuex/actions/actions.js‎

Lines changed: 0 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,6 @@
55
// commit=>mutations,触发同步操作
66
// dispatch=>actions,触发异步操作
77

8-
// import model from '../../model/client-model'
9-
import model from 'model'
10-
import notify from '../../components/notification/function'
11-
import bus from '../../util/bus'
12-
13-
const handleError = (err) => {
14-
// handle error
15-
if (err.code === 401) {
16-
notify({
17-
content: '你得先登录啊！'
18-
})
19-
bus.$emit('auth')
20-
}
21-
}
22-
238
export default {
249
// 异步action，调用同步mutation，data为包装了多个参数的参数对象
2510
updateCountAsync (store, data) {
@@ -28,89 +13,5 @@ export default {
2813
num: data.num
2914
})
3015
}, data.time)
31-
},
32-
fetchTodos ({ commit }) {
33-
commit('startLoading')
34-
return model.getAllTodos()
35-
.then(data => {
36-
commit('endLoading')
37-
commit('fillTodos', data)
38-
})
39-
.catch(err => {
40-
commit('endLoading')
41-
handleError(err)
42-
})
43-
},
44-
addTodo ({ commit }, todo) {
45-
commit('startLoading')
46-
model.createTodo(todo)
47-
.then(data => {
48-
commit('addTodo', data)
49-
commit('endLoading')
50-
notify({
51-
content: '你又多了一件事要做'
52-
})
53-
}).catch(err => {
54-
commit('endLoading')
55-
handleError(err)
56-
})
57-
},
58-
updateTodo ({ commit }, { id, todo }) {
59-
commit('startLoading')
60-
model.updateTodo(id, todo)
61-
.then(data => {
62-
commit('updateTodo', { id, todo: data })
63-
commit('endLoading')
64-
}).catch(err => {
65-
handleError(err)
66-
commit('endLoading')
67-
})
68-
},
69-
deleteTodo ({ commit }, id) {
70-
commit('startLoading')
71-
model.deleteTodo(id)
72-
.then(data => {
73-
commit('deleteTodo', id)
74-
notify({
75-
content: '你又少了一件事要做'
76-
})
77-
commit('endLoading')
78-
}).catch(err => {
79-
handleError(err)
80-
commit('endLoading')
81-
})
82-
},
83-
deleteAllCompleted ({ commit, state }) {
84-
commit('startLoading')
85-
const ids = state.todos.filter(t => t.completed).map(t => t.id)
86-
model.deleteAllCompleted(ids)
87-
.then(() => {
88-
commit('deleteAllCompleted')
89-
commit('endLoading')
90-
notify({
91-
content: '清理一下~~~'
92-
})
93-
}).catch(err => {
94-
handleError(err)
95-
commit('endLoading')
96-
})
97-
},
98-
login ({ commit }, { username, password }) {
99-
commit('startLoading')
100-
return new Promise((resolve, reject) => {
101-
model.login(username, password)
102-
.then(data => {
103-
commit('doLogin', data)
104-
notify({
105-
content: '登录成功'
106-
})
107-
resolve()
108-
commit('endLoading')
109-
}).catch(err => {
110-
handleError(err)
111-
reject(err)
112-
commit('endLoading')
113-
})
114-
})
11516
}
11617
}

‎12-前端框架/06-vue/24-深入细化学习/14-vuex/app.vue‎

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
<template>
2-
<div id="app"></div>
2+
<div id="app">
3+
{{count}}
4+
{{textPlus}}
5+
</div>
36
</template>
47

58
<script>
@@ -13,34 +16,48 @@ import {
1316
export default {
1417
methods: {
1518
// mapMutations
16-
...mapMutations(['updateCount']),
19+
...mapMutations(['updateCount', 'updateText', 'a/updateText']),
1720
// mapActions
18-
...mapActions(['updateCountAsync'])
21+
...mapActions(['updateCountAsync', 'a/add'])
1922
},
2023
computed: {
2124
/**
2225
* 获取state
2326
*/
2427
// 不使用mapState，不推荐
25-
count () {
28+
count1 () {
2629
return this.$store.state.count
2730
},
2831
// 使用mapState，推荐
2932
...mapState(['count']), // 同名，不设置别名
3033
...mapState({
3134
counter1: 'count', // 设置别名1
32-
counter2: (state) => state.count // 设置别名2
35+
counter2: (state) => state.count // 设置别名2
3336
}),
3437
/**
3538
* 获取getter
3639
*/
3740
// 不使用mapGetters，不推荐
38-
fullName () {
41+
fullName1 () {
3942
return this.$store.getters.fullName
4043
},
4144
// 使用mapGetters，推荐
4245
...mapGetters({
4346
'fullName': 'fullName'
47+
}),
48+
49+
/**
50+
* 使用模块
51+
*/
52+
// 获取 a 模块中state的 text
53+
testA1 () {
54+
return this.$store.state.a.text
55+
},
56+
...mapState({
57+
testA2: (state) => state.a.text
58+
}),
59+
...mapGetters({
60+
'textPlus': 'a/textPlus'
4461
})
4562
},
4663
mounted () {
@@ -77,6 +94,13 @@ export default {
7794
num: 3,
7895
time: 1000
7996
})
97+
98+
/**
99+
* 使用模块
100+
*/
101+
this.updateText('test') // 不设置namespace
102+
this['a/updateText']('test') // 设置namespace
103+
this['a/add']() // 设置namespace
80104
}
81105
}
82106
</script>

‎12-前端框架/06-vue/24-深入细化学习/14-vuex/index.js‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,25 @@ Vue.use(Vuex)
77
// 创建store实例
88
const store = createStore()
99

10+
// vuex 动态注册模块，注册模块c
1011
store.registerModule('c', {
1112
state: {
1213
text: 3
1314
}
1415
})
16+
// 注销模块
17+
store.unregisterModule('c')
1518

19+
// watch监听
1620
store.watch((state) => state.count + 1, (newCount) => {
1721
console.log('new count watched:', newCount)
1822
})
19-
23+
// 监听mutations，mutations调用时回调，一般用于打log调试、制作插件等
2024
store.subscribe((mutation, state) => {
2125
console.log(mutation.type)
2226
console.log(mutation.payload)
2327
})
24-
28+
// 监听actions，actions调用时回调，一般用于打log调试、制作插件等
2529
store.subscribeAction((action, state) => {
2630
console.log(action.type)
2731
console.log(action.payload)

‎12-前端框架/06-vue/24-深入细化学习/14-vuex/store.js‎

Lines changed: 87 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -17,70 +17,97 @@ export default () => {
1717
state: defaultState, // state
1818
mutations, // mutations
1919
getters, // getters
20-
actions // actions
20+
actions, // actions
21+
22+
/**
23+
* vuex 模块
24+
* 在项目非常大时使用
25+
* 模块可以嵌套，但逻辑会变复杂，不推荐
26+
*/
27+
modules: {
28+
// 模块a
29+
a: {
30+
// 使用了命名空间，允许不同模块mutations和actions重复
31+
// 如果为false，则调用mutations和actions不需要指定模块
32+
namespaced: true,
33+
state: {
34+
text: 1
35+
},
36+
mutations: {
37+
// 如果不设置namespace，此处的state指向模块中的state，不需要指定模块
38+
// 否则区分命名空间
39+
updateText (state, text) {
40+
console.log('a.state', state)
41+
state.text = text
42+
}
43+
},
44+
getters: {
45+
// getters 全局getter
46+
// rootState 全局state
47+
textPlus (state, getters, rootState) {
48+
return state.text + rootState.b.text // 获取模块b数据
49+
}
50+
},
51+
actions: {
52+
add ({ state, commit, rootState }) {
53+
// root: true 才会搜索全局mutation
54+
commit('updateText', rootState.count, { root: true })
55+
// 调用全局 mutation
56+
commit('updateCount', { num1: 1, num: 2 }, { root: true })
57+
}
58+
}
59+
},
60+
// 模块b
61+
b: {
62+
namespaced: true,
63+
state: {
64+
text: 2
65+
},
66+
actions: {
67+
testAction ({ commit }) {
68+
// 模块间调用
69+
commit('a/updateText', 'test', { root: true })
70+
}
71+
}
72+
}
73+
},
2174

22-
// plugins: [
23-
// (store) => {
24-
// console.log('my plugin invoked')
25-
// }
26-
// ]
27-
// modules: {
28-
// a: {
29-
// namespaced: true,
30-
// state: {
31-
// text: 1
32-
// },
33-
// mutations: {
34-
// updateText (state, text) {
35-
// console.log('a.state', state)
36-
// state.text = text
37-
// }
38-
// },
39-
// getters: {
40-
// textPlus (state, getters, rootState) {
41-
// return state.text + rootState.b.text
42-
// }
43-
// },
44-
// actions: {
45-
// add ({ state, commit, rootState }) {
46-
// commit('updateCount', { num: 56789 }, { root: true })
47-
// }
48-
// }
49-
// },
50-
// b: {
51-
// namespaced: true,
52-
// state: {
53-
// text: 2
54-
// },
55-
// actions: {
56-
// testAction ({ commit }) {
57-
// commit('a/updateText', 'test text', { root: true })
58-
// }
59-
// }
60-
// }
61-
// }
75+
/**
76+
* vuex 插件
77+
* 数组形式，一个插件就是一个数组元素
78+
*/
79+
plugins: [
80+
(store) => {
81+
// 可以调用 store.subscribe ... 自定义功能
82+
console.log('my plugin invoked')
83+
}
84+
]
6285
})
6386

64-
// if (module.hot) {
65-
// module.hot.accept([
66-
// './state/state',
67-
// './mutations/mutations',
68-
// './actions/actions',
69-
// './getters/getters'
70-
// ], () => {
71-
// const newState = require('./state/state').default
72-
// const newMutations = require('./mutations/mutations').default
73-
// const newActions = require('./actions/actions').default
74-
// const newGetters = require('./getters/getters').default
87+
/**
88+
* 为vuex添加热更新功能
89+
* 否则每次更新代码会自动刷新一次页面
90+
*/
91+
if (module.hot) {
92+
module.hot.accept([
93+
'./state/state',
94+
'./mutations/mutations',
95+
'./actions/actions',
96+
'./getters/getters'
97+
], () => {
98+
const newState = require('./state/state').default
99+
const newMutations = require('./mutations/mutations').default
100+
const newActions = require('./actions/actions').default
101+
const newGetters = require('./getters/getters').default
75102

76-
// store.hotUpdate({
77-
// state: newState,
78-
// mutations: newMutations,
79-
// getters: newGetters,
80-
// actions: newActions
81-
// })
82-
// })
83-
// }
103+
store.hotUpdate({
104+
state: newState,
105+
mutations: newMutations,
106+
getters: newGetters,
107+
actions: newActions
108+
})
109+
})
110+
}
84111

85112
return store
86113
}

0 commit comments

Comments
 (0)