Vuex的使用（四）——mapState的简化写法

亦凉 2022-09-10 10:25 195阅读 0赞

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

按上一章的说明，可以在mapState的参数对象里定义多个属性来批量声明state，如果不需要对state进行额外处理的话，写法还可以进一步简化（新增文件路径为src\\components\\componentC.vue），代码如下：

<template>
        <div>
            <span>mapState简化写法</span>
            <br />
            <span>stete in vuex：{
       {param1}}</span>
        </div>
    </template>
    
    <script> import { mapState } from "vuex"; export default { name: "component-c", // computed: mapState({ // param1: state => state.param1 // }) // 如果不需要对state进行额外处理，上下两种写法是等价的 computed: mapState(["param1"]) }; </script>
    
    <style scoped> </style>

如果想定义组件自己的局部计算变量，则需要调整一下写法（新增文件路径为src\\components\\componentD.vue），代码如下：

<template>
        <div>
            <span>mapState与计算变量混用</span>
            <br />
            <span>stete in vuex：{
       {param1}}</span>
        </div>
    </template>
    
    <script> import { mapState } from "vuex"; export default { name: "component-d", // 实际应用中计算变量还会包含局部计算变量，混用写法如下 computed: { computedParam() { return "computedParam"; }, ...mapState(["param1"]) } }; </script>
    
    <style scoped> </style>

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

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

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