VUE的中 computed: { ...mapState([‘auditObj‘]), }写法详解

具体解析：

1. computed：

   • 这是 Vue 组件选项中的计算属性，用于声明依赖于其他数据而存在的派生数据。
   • 计算属性会根据依赖进行缓存，只有当依赖的数据发生变化时才会重新计算。

2. mapState：

   • 这是 Vuex 提供的一个辅助函数，用于将 store 中的 state 映射到组件的计算属性中。
   • 它的作用是简化手动编写计算属性来获取 store 中状态的过程。

3. ... 扩展运算符：

   • 这里使用 ES6 的扩展运算符，将 mapState 返回的对象展开并合并到 computed 对象中。
   • 如果不使用扩展运算符，需要手动将映射的状态添加到计算属性中，代码会更繁琐。

4. ['auditObj']：

   • 这是一个数组，指定了要从 Vuex store 的 state 中映射的状态名称。
   • 这里表示要映射名为 auditObj 的状态。
     

等价写法：

computed: {auditObj() {
// 把store中存储共享状态数据的对象auditObj拿出来全文方便调用return this.$store.state.auditObj;}
}

拓展解析：

一、Vue 的核心特性

1. 响应式数据绑定
   Vue 会自动追踪数据变化，并更新依赖该数据的 DOM，无需手动操作 DOM。

<div id="app"><p>{{ message }}</p><button @click="message = 'Hello Vue!'">点击修改</button>
</div><script>new Vue({el: '#app',data() {return { message: 'Hello World!' }}})
</script>

二、computed是 Vue 组件选项中的一个特殊配置项

1. computed 是Vue 组件选项中的计算属性,会根据依赖进行缓存，只有当依赖的数据发生变化时才会重新计算

2 和方法的调用区别【Computed (有缓存)/Methods (无缓存)】

<template><div><p>Count: {{ count }}</p><button @click="count++">Increase Count</button><p>Computed Time: {{ computedTime }}</p> <!-- 计算属性 --><p>Method Time: {{ methodTime() }}</p> <!-- 方法调用 --></div>
</template><script>
export default {data() {return {count: 0}},computed: {computedTime() {// 这个计算属性不依赖任何响应式数据（如 count），所以它只计算一次，永远返回缓存值return Date.now();}},methods: {methodTime() {// 方法每次都会执行return Date.now();}}
}
</script>

三、Vuex 的mapState函数

1. Vuex 核心概念：store

Vuex 是 Vue.js 官方的状态管理模式库，用于集中管理 Vue 应用中多个组件共享的状态；store 是 Vuex 的核心容器，它封装了应用的共享状态（state） 和操作状态的方法。

• 特点：

  • 整个应用只有一个唯一的 store（单例模式）
  • 包含 state（状态）、mutations（同步修改）、actions（异步操作）、getters（派生状态）等核心模块
  • 组件通过 store 访问或修改共享状态

• 创建方式：

• import Vue from 'vue'
  import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({// 核心配置项state: { ... },       // 状态mutations: { ... },   // 同步修改状态actions: { ... },     // 异步操作getters: { ... },     // 计算属性modules: { ... }      // 模块拆分（复杂应用）
  })export default store

  2. state：存储共享状态的数据

  state 是 store 中存储共享状态数据的对象，相当于组件中 data 的全局版本。

       基本用法：

const store = new Vuex.Store({state: {count: 0,              // 基础类型user: { name: 'John' }, // 对象类型todos: ['Learn Vuex']   // 数组类型}
})

    组件中访问 state：通过 this.$store.state.xxx 直接访问：

// 组件中
export default {counted() {console.log(this.$store.state.count) // 输出 0console.log(this.$store.state.user.name) // 输出 'John'}
}

3. mapState：映射 state 到组件的辅助函数

mapState 是 Vuex 提供的辅助函数，用于将 store.state 中的属性映射到组件的计算属性（computed）中，简化代码。当组件需要访问多个 state 属性时，避免重复编写 this.$store.state.xxx。

• 数组形式（适用于属性名与 state 中一致）：

import { mapState } from 'vuex';export default {computed: {...mapState(['count', 'auditObj']) 
}

上面等同于

export default {computed: {count() {return this.$store.state.count; // 重复写 this.$store.state},user() {return this.$store.state.auditObj; // 重复写 this.$store.state}}
}

• 对象形式（适用于需要重命名或复杂映射）：

export default {computed: {...mapState({myCount: 'count'})}
}