关于javascript:第5讲-vuex看完这篇你就会了1

vuex 和 vue-router 一样都是 vue 的外围插件，它是 vue 的状态治理，对于跨组件之间的传值，能够将这些值放到状态 state 里进行治理

1. 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',]),

 },

1. 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: {},}