继续接着上一篇的内容《[Vuex]入门学习之一Vuex初识》学习新的内容:mapState。从字面的意思可以看出来辅助函数mapState的作用是用来映射状态的。结合官网指南的介绍了解到它的应用场景是在维护多个状态最适合了。官方指南的定义：mapState函数帮助我们生成计算属性。
main.js 入口文件
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')router.js 路由配置
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})store.js Vuex的核心文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
console.log("increment:" + this.state.count)
},
decrement(state) {
state.count--
console.log("decrement:" + this.state.count)
}
},
actions: {}
})以上三个文件没什么变化，主要是修改几个组件文件:
Home.vue
<template>
<div class="home">
<p>这是主页</p>
<!-- 在子组件上接收父组件传递的数据 -->
<HelloWorld msg="请打开浏览器控制台" :counts="newcounts"/>
<button @click="increment">+1</button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import store from '@/store'
//引入 mapState 这个对象
import { mapState } from 'vuex'
export default {
name: 'home',
components: {
HelloWorld
},
methods: {
increment() {
store.commit('increment')
console.log('increment:'+store.state.count)
}
}
// 方式 一 箭头函数
computed: mapState({
// 使用了辅助函数mapState 所以可以直接传递state参数
newcounts: state => state.count
})
// 方式二 普通函数
// computed: mapState ({
// newcounts: function(state){
// return state.count
// }
// })
//
// 方式三 字符串
// computed: mapState ({
// newcounts:'count'
//
// })
...
}
</script>HelloWorld.vue 子组件
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<p>{{counts}}</p> //插值展现
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
counts: Number //接收
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>About.vue 组件
<template>
<div class="about">
<h1>这个是关于页面</h1>
<button @click="decrement">-1</button>
<p>{{newcount}}</p>
</div>
</template>
<script>
import store from '../store'
// 引入 辅助函数mapState
import { mapState } from 'vuex'
export default {
name: 'about',
// 方法一
computed: mapState({
// 方式一 通过箭头函数 传递
//newcount: state => state.count
//方式二 一个函数
// newcount :function(state){
// return state.count;
// }
//方式三 返回一个字符串
newcount: 'count'
}),
methods: {
decrement() {
store.commit('decrement')
console.log('decrement:' + store.state.count)
}
}
}
</script>store.js Vuex核心配置文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//demo for vuex store
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
increment(states) {
states.count++
},
decrement(states) {
states.count--
}
},
actions: {}
})使用mapState辅助函数需要注意几点：
1.组件内首先要引入它
import { mapState } from 'vuex'2.它是为组件创建计算属性使用的，所以固定格式:
computed:mapState({/* 这里是参数 */})3.mapState的语法格式:
mapState(namespace?: string, map: Array<string> | Object<string | function>): Object
有两个参数，第一个是可选的命名空间，字符串类型
第二个参数是map映射属性，这个属性可以是数组(字符串数组)或对象类型(对象的属性可以是函数或者字符串)，上面的例子写的都是对象类型（方式1和2都是函数方式，方式3就是字符串方式来的）:
//About.vue
{
// 方式一 通过箭头函数 传递
//newcount: state => state.count
//方式二 一个函数
// newcount :function(state){
// return state.count;
// }
//方式三 返回一个字符串
newcount: 'count'
}写成数组类型：
//字符串数组 computed: mapState(['count']), //直接使用state里的count
也是可以的
