Skip to content

Commit 6011ab2

Browse files
csxiaoyaojianxiancsxiaoyaojianxian
committed
vuex
1 parent 413b52d commit 6011ab2

File tree

7 files changed

+340
-0
lines changed

7 files changed

+340
-0
lines changed

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
// action 也是用于修改数据，但是与mutations不同，可以为异步
2+
// 只能传递一个参数，多参数需要包装为一个对象
3+
// action 的触发使用 dispatch，mutation 的触发使用 commit
4+
// 同步的可以直接用mutations，异步的必须用actions
5+
// commit=>mutations,触发同步操作
6+
// dispatch=>actions,触发异步操作
7+
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+
23+
export default {
24+
// 异步action，调用同步mutation，data为包装了多个参数的参数对象
25+
updateCountAsync (store, data) {
26+
setTimeout(() => {
27+
store.commit('updateCount', {
28+
num: data.num
29+
})
30+
}, 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+
})
115+
}
116+
}

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

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<template>
2+
<div id="app"></div>
3+
</template>
4+
5+
<script>
6+
import {
7+
mapState,
8+
mapGetters,
9+
mapMutations,
10+
mapActions
11+
} from 'vuex'
12+
13+
export default {
14+
methods: {
15+
// mapMutations
16+
...mapMutations(['updateCount']),
17+
// mapActions
18+
...mapActions(['updateCountAsync'])
19+
},
20+
computed: {
21+
/**
22+
* 获取state
23+
*/
24+
// 不使用mapState，不推荐
25+
count () {
26+
return this.$store.state.count
27+
},
28+
// 使用mapState，推荐
29+
...mapState(['count']), // 同名，不设置别名
30+
...mapState({
31+
counter1: 'count', // 设置别名1
32+
counter2: (state) => state.count // 设置别名2
33+
}),
34+
/**
35+
* 获取getter
36+
*/
37+
// 不使用mapGetters，不推荐
38+
fullName () {
39+
return this.$store.getters.fullName
40+
},
41+
// 使用mapGetters，推荐
42+
...mapGetters({
43+
'fullName': 'fullName'
44+
})
45+
},
46+
mounted () {
47+
/**
48+
* 设置state数据
49+
*/
50+
// 不使用mapState，直接设置，否则调用mutation或action
51+
this.$store.state.count = 3
52+
53+
/**
54+
* 使用commit调用mutations（必须同步）
55+
*/
56+
// 不使用mapMutations，不推荐
57+
this.$store.commit('updateCount', {
58+
num1: 1,
59+
num2: 2
60+
})
61+
// 使用mapMutations，推荐
62+
this.updateCount({
63+
num1: 1,
64+
num2: 2
65+
})
66+
67+
/**
68+
* 使用dispatch调用actions（可以异步）
69+
*/
70+
// 不使用mapActions，不推荐
71+
this.$store.dispatch('updateCountAsync', {
72+
num: 3,
73+
time: 1000
74+
})
75+
// 使用mapActions，推荐
76+
this.updateCountAsync({
77+
num: 3,
78+
time: 1000
79+
})
80+
}
81+
}
82+
</script>

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// getters 理解为 computed，用于组装数据，也在组件的computed引入
2+
export default {
3+
fullName (state) {
4+
return `${state.firstName} ${state.lastName}`
5+
}
6+
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import Vue from 'vue'
2+
import App from './app.vue'
3+
4+
import Vuex from 'vuex'
5+
import createStore from './store/store'
6+
Vue.use(Vuex)
7+
// 创建store实例
8+
const store = createStore()
9+
10+
store.registerModule('c', {
11+
state: {
12+
text: 3
13+
}
14+
})
15+
16+
store.watch((state) => state.count + 1, (newCount) => {
17+
console.log('new count watched:', newCount)
18+
})
19+
20+
store.subscribe((mutation, state) => {
21+
console.log(mutation.type)
22+
console.log(mutation.payload)
23+
})
24+
25+
store.subscribeAction((action, state) => {
26+
console.log(action.type)
27+
console.log(action.payload)
28+
})
29+
30+
new Vue({
31+
store,
32+
render: (h) => h(App)
33+
}).$mount('#root')

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// mutations 同步更改状态，只能最多带一个参数，多参数需要包装为一个对象
2+
// 所有state的修改需要通过mutation（实际可以直接修改，但是不推荐），可以添加 strict:true 来限制不能外部修改
3+
// mutation 的触发使用 commit，action 的触发使用 dispatch
4+
// commit=>mutations,触发同步操作
5+
// dispatch=>actions,触发异步操作
6+
7+
export default {
8+
updateCount (state, { num1, num2 }) {
9+
state.count = num1 + num2
10+
}
11+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
// state 类似 data 属性
2+
export default {
3+
count: 0,
4+
firstName: 'Jianfeng',
5+
lastName: 'Sun'
6+
}

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

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import Vuex from 'vuex'
2+
3+
import defaultState from './state/state'
4+
import mutations from './mutations/mutations'
5+
import getters from './getters/getters'
6+
import actions from './actions/actions'
7+
8+
const isDev = process.env.NODE_ENV === 'development'
9+
10+
export default () => {
11+
const store = new Vuex.Store({
12+
// 所有state的修改需要通过mutation（实际可以直接修改，但是不推荐）
13+
// strict:true 限制不能外部修改
14+
// 但是正式环境不建议添加此属性
15+
strict: isDev,
16+
// 四个属性
17+
state: defaultState, // state
18+
mutations, // mutations
19+
getters, // getters
20+
actions // actions
21+
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+
// }
62+
})
63+
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
75+
76+
// store.hotUpdate({
77+
// state: newState,
78+
// mutations: newMutations,
79+
// getters: newGetters,
80+
// actions: newActions
81+
// })
82+
// })
83+
// }
84+
85+
return store
86+
}

0 commit comments

Comments
 (0)