Vuex的使用（三）——mapState的定义和用法

男娘i 2022-09-09 13:50 129阅读 0赞

参考文档：https://vuex.vuejs.org/zh/guide/

当需要在组件中使用多个state时，可以利用mapState批量生成计算属性（新增文件路径为src\\components\\componentB.vue），代码如下：

<template>
        <div>
            <span>mapState基础用法</span>
            <br />
            <span>param1：{
       {param1}}</span>
            <br />
            <span>param2：{
       {param2}}</span>
            <br />
            <span>param3：{
       {param3}}</span>
            <br />
            <span>param4：{
       {param4}}</span>
            <br />
            <span>param5：{
       {param5}}</span>
        </div>
    </template>
    
    <script> // 注意这里要额外引入mapState import { mapState } from "vuex"; export default { name: "component-b", data: function() { return { item: "component-b data" }; }, // 当需要在组件中使用多个state时，可以利用mapState批量生成计算属性（相当于简化写法） computed: mapState({ // 基本写法 param1: state => state.param1, // 简化写法，上下两种写法等价 param2: "param1", // 同样支持对state进行二次处理，如果这个处理动作在其他组件中也通用，那param3在Vuex中写为getters比较合适 param3: state => `${ state.param1} ${ state.param1}`, // 如果二次处理需要使用组件定义的局部变量，则不能用箭头函数 param4: function(state) { return `${ state.param1} ${ this.item}`; }, // 如果使用箭头函数，可以 在控制台看到打印出来的this是undefined param5: state => { console.log(`this is ${ this}`); return ""; } }) }; </script>

引用上面创建的component-b查看效果（修改文件路径为src\\main.js），代码如下：

import Vue from 'vue'
    import store from './store'
    import ComponentA from './components/ComponentA.vue'
    import ComponentB from './components/ComponentB.vue'
    
    new Vue({ 
        el: '#app',
        store,
        components: {  ComponentA, ComponentB},
        template: '<div><component-a></component-a><component-b></component-b></div>'
    });

运行后查看页面可以看到通过mapState批量生成的计算属性和单独定义的没有任何区别。