5. vuex详解¶
5.1. vuex 基本使用¶
通过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 | import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
counter:10000
},
mutations: {
add(state){
state.counter +=1
},
sub(state){
state.counter-=1
}
},
actions: {},
getters: {},
modules: {},
})
export default store
|
5.2. vuex getter¶
getter 类似组件的属性,不会每次获取的时候都进行计算。
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 | import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
counter:10000,
students:[
{id:1,firstName:"jiedi01", secondName: "zhao",age:21,height:165},
{id:2,firstName:"jiedi02", secondName: "zhao",age:22,height:170},
{id:3,firstName:"jiedi03", secondName: "zhao",age:25,height:175},
{id:4,firstName:"jiedi04", secondName: "zhao",age:30,height:180},
]
},
mutations: {
add(state){
state.counter +=1
},
sub(state){
state.counter-=1
}
},
actions: {},
getters: {
powerCounter(state){
return state.counter * state.counter
},
ageMore25Count(state){
return state.students.filter(student=>student.age>=25).length
},
StudentById(state){
// 这是返回一个函数, 参数是接受一个参数的
// 好理解的写法
// let infoByid=function (id){
// return state.students.find(s=>s.id===id)
// }
// return infoByid
// 简写的写法
return (id)=>state.students.find(s=>s.id===id)
}
},
modules: {},
})
export default store
|
5.3. vuex mutation¶
mutation 可以做一些同步操作,方便使用dev工具进行前段调整。 .. literalinclude:: ../../中级学习/07-vuex/02-vuexlearn-mutation/store/index.js
- encoding
utf-8
- language
javascript
- emphasize-lines
1
- linenos
5.4. vuex action¶
mutation 可以做一些同步操作,有些异步操作,就需要action了, 然后action操作mutation可以跟着变化。
5.5. vuex module¶
module是可以做多个模块的, 方便管理
5.6. vuex 文件拆解¶
随着项目越来越大, 单个index.js不太方便文件管理的,需要进行拆分管理。
ls -1 中级学习/07-vuex/06-vuexlearn-文件拆解/store/
actions.js
getters.js
index.js
modules
mutations.js
state.js