使用vuex解决从服务端获取的键值对问题
使用vuex解决从服务端获取的键值对问题
在store中如何取得vue对象
store是做状态管理的不应该在store里获取vue对象,相关逻辑应该在vue实例页面处理
使用vuex解决从服务端获取的键值对问题
有全局都可能通用的二级代码(即由服务端返回的对象数组),可以通过vuex存储二级代码,界面上默认显示code通过过滤器过滤为显示的值
由于需要从服务端获取代码可能会存在界面上先显示code再显示成文字的问题(如先显示1再显示为男)
页面显示部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<template slot-scope="scope">
{{scope.row[item.key]|codeFilter('codeName',hospitalLevelList)}}
</template>
<script>
import { mapActions, mapState } from 'vuex'
computed: {
...mapState({
hospitalLevelList: state => state.static.hospitalLevelList
})
},
methods: {
...mapActions([
'getHosptialLevel'
]),
},
mounted () {
this.getHosptialLevel()
}
过滤器部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16// src/utils/filters.js
let codeFilter = (value, key, arr) => {
let returnObj = ''
let tmp = arr.filter(function (item) {
if (item.codeValue === value) {
return item
}
})
if (tmp.length !== 0) {
returnObj = tmp[0][key]
}
return returnObj
}
export {
codeFilter
}
vuex部分1
2
3
4
5
6
7
8// src/store/index.js
import moduleA from './modules/static'
const store = new Vuex.Store({
modules: {
static: moduleA
},
....
})
1 | // src/store/modules/static.js |
1 | // src/utils/http.js |
上面每添加一个静态代码就要重新再写一个state,mutation,action要改动的地方较多
可以将需要改动的地方作为变量,改动后新增静态代码就只需要改动state及调用方法的参数即可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// src/store/index.js
import axios, {
setStorage,
getStorage
} from '@/utils/http'
state: {
staticCode: {
idTypeList: [],
hospitalLevelList: []
}
},
actions: {
getStaticCodeAction (context, {
storageName,
codeType,
stateName
}) {
if (getStorage(storageName) === null) {
axios.post('staticCode', {
body: {
codeType: codeType,
pageSize: '50',
pageNum: '1'
}
})
.then(res => {
if (res.data.code === '20000') {
setStorage(storageName, res.data.result.data)
context.commit('StaticMutation', {
stateName,
stateText: res.data.result.data
})
} else {
console.error('获取静态代码失败')
}
})
.catch(err => {
console.error('获取静态代码异常', err)
})
} else {
// storage里已经存在
if (context.state.staticCode[stateName].length === 0) {
// state里面没有(如页面刷新)则重新提交
context.commit('StaticMutation', {
stateName,
stateText: getStorage(storageName)
})
} else {
// state已存在不需做任何处理,直接使用即可
}
}
}
},
mutations: {
StaticMutation (state, payload) {
state.staticCode[payload.stateName] = payload.stateText
},
}
需要用到二级代码的地方做如下处理1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24import {mapActions, mapState} from 'vuex'
computed: {
...mapState({
idTypeList: state => state.staticCode.idTypeList,
hospitalLevelList: state => state.staticCode.hospitalLevelList
})
},
methods: {
...mapActions(['getStaticCodeAction']),
},
mounted:{
// 在需要的地方调用 不一定要在mounted里调用
this.getStaticCodeAction({
storageName: 'idTypeList',
codeType: 'idType',
stateName: 'idTypeList'
})
this.getStaticCodeAction({
storageName: 'hospitalLevelList',
codeType: 'hospitalLevel',
stateName: 'hospitalLevelList'
})
}
```