vuex和vue-router一样都是vue的外围插件，它是vue的状态治理，对于跨组件之间的传值，能够将这些值放到状态state里进行治理
- state用法
在第2讲里，我曾经对src/store这个文件夹进行了革新，这里先在src/store/state.js里新增一个值，而后来解说vuex的用法
const state = {
menuType: 1
}
export default state
这样我就将menuType放入到了vuex里，让vuex来治理这个值，接下来我在组件中调用这个值：
<template>
<section>
{{menuType}}
</section>
</template>
<script>
export default {
computed: {
menuType () {
return this.$store.state.menuType
}
},
data () {
return {
}
},
methods: {
},
}
</script>
那要是放在模块里的值，应该怎么去获取呢？
再来看一下，我在第2讲中新建的src/store/module/user.js文件，这是一个模块，在user.js里新增一个值，在组件里应该怎么获取呢？
const state = {
userName: '张三'
}
const mutations = {}
const actions = {}
export default {
state,
mutations,
actions
}
在组件里调用这个值
<template>
<section>
{{menuType}}
{{userName}}
</section>
</template>
<script>
export default {
computed: {
menuType () {
return this.$store.state.menuType
},
userName () {
return this.$store.state.user.userName // 调用模块里的值
}
},
data () {
return {
}
},
methods: {
},
}
</script>
除了下面提到的组件里获取值的形式，还能够利用vuex提供的辅助函数mapSate来获取值：
<template>
<section>
{{menuType}}
{{userName}}
</section>
</template>
<script>
import {mapState} from 'vuex'
export default {
computed: {
...mapState({
menuType: state => state.menuType,
userName: state => state.user.userName
})
},
data () {
return {
}
},
methods: {
},
}
</script>
也能够采纳简写的形式：
computed: {
...mapState({
menuType: state => state.menuType,
userName: state => state.user.userName
})
},
// 简写成
computed: {
...mapState({
userName: state => state.user.userName
}),
...mapState([
'menuType',
]),
},
- getter用法
相当于vue里的computed属性，比方menuType = 1，在我本人的我的项目里，它代表着菜单类型，1代表ping拨测菜单，2代表网页拨测菜单，在组件里获取这个值的时候，多次重复判断没有意义，咱们就能够放到getter外面进行判断
找到src/store/getter.js：
const getters = {
menuType: state => {
if (state.menuType == 1) {
return 'ping拨测'
} else {
return '网页拨测'
}
}
}
export default getters
而后在组件里去获取这个值：
<template>
<section>
{{menuTypeName}}
</section>
</template>
<script>
export default {
computed: {
menuTypeName () {
return this.$store.getters.menuType
}
},
data () {
return {
}
},
methods: {
},
}
</script>
同样也能够利用vuex提供的辅助函数mapGetters来获取值：
computed: {
...mapGetters([
'menuType'
])
},
写在模块里的getters如何获取呢？
咱们在src/store/module/user.js新增如下代码：
const state = {
userName: '张三'
}
const getters = {
userName: state => {
return state.userName + '是管理员'
}
}
const mutations = {}
const actions = {}
export default {
state,
getters,
mutations,
actions
}
利用vuex辅助函数mapGetters来获取写在模块里的getters：
<template>
<section>
{{userName}}
</section>
</template>
<script>
import {mapState, mapGetters} from 'vuex'
export default {
computed: {
// menuTypeName () {
// return this.$store.getters.menuType
// },
...mapGetters([
'userName'
])
},
data () {
return {
}
},
methods: {
},
}
发表回复