共计 2377 个字符，预计需要花费 6 分钟才能阅读完成。
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: {},}