Vuex state、mapState、...mapState (二)

目录

State 单一状态树

Vue 组件中获取 Vuex 状态

mapState 辅助函数

mapState 对象展开运算符

computed 接收 Vuex state 返回数据有 4 种方式

---

State 单一状态树

• Vuex 使用单一状态树时，用一个对象包含全部应用层级状态
• Vuex 作为一个“唯一数据源”存在，意味着每个应用将仅仅包含在一个 store 实例中

Vue 组件中获取 Vuex 状态

• Vuex 状态存储是响应式的，从 store 实例中读取状态最简单方法是在计算属性中返回某个状态
• 也可以通过 this.$store.state 访问状态中的值
• Vuex 通过 store 选项提供一种机制，将状态从根组件注入到每一个子组件中，调用 Vue.use(Vuex) 方法

// src/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
})

// state.js
export default {
  name: '张三',
  age: 30,  
  sex: '男',
  from: '中国'
}

<template>
  <section>
    {{age}}
  </section>
</template>

<script>
export default{
  name: 'Home',
  computed: {
    age(){
      // 每当 age 变化时，都会重新求取计算属性，触发更新相关联 DOM
      return this.$store.state.age
    }
  }  
}
</script>

mapState 辅助函数

• 当一个组件需要获取多个状态时，将这些状态都声明为计算属性有些重复和冗余
• 为了解决这个问题，使用 mapState 辅助函数帮助我们生成计算属性

<template>
  <section>
    {{age}}
  </section>
</template>

<script>
import { mapState } from 'vuex'
export default {
  data(){
    return{
      national: '国籍'
    }
  },
  computed: mapState({
    age: state => state.age, // 箭头函数可使代码更简练
    ageAlias: 'age', // 字符串参数 'age' 等同于 `state => state.age`
    userInfo (state) {
      // 为了能够使用 `this` 获取局部状态，必须使用常规函数
      return state.name + this.national + state.from
    }
  })
}
</script>

• 映射计算属性名称与 state 子节点名称相同时，可以给 mapState 传一个字符串数组

computed: mapState(['count']) // 映射 this.count 为 this.$store.state.count

mapState 对象展开运算符

• 返回一个对象
• 使用工具函数将多个对象合并为一个对象，最终把对象传给 computed 属性

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}

computed 接收 Vuex state 返回数据有 4 种方式

• 方法一：mapState 对象展开运算符

computed: {
  ...mapState({
    count: state => state.count
  })
}

• 方法二：mapState 辅助函数参数是一个对象

computed: mapState({
  count: state => state.count
})

•  方法三：mapState 辅助函数参数是一个字符串数组

computed: mapSate(['count'])

•   方法四：定义一个计算属性方法返回某个状态

computed: {
  count(){
    return this.$store.state.count
  }
}

 Vuex 状态管理模式(一)_taoqidejingling的博客-CSDN博客_vuex状态管理模式Vuex响应式状态管理模式；Vuex安装和使用；Vuex核心；Vuex优势和缺点；https://blog.csdn.net/taoqidejingling/article/details/121221646

Vuex state、mapState、...mapState (二)_taoqidejingling的博客-CSDN博客使用 computed 接收 state 返回的数据，有 4 种方式；子组件可以通过 this.$store.state 访问 store 状态中的值；mapState 辅助函数帮助我们生成计算属性，可以传入一个对象、也可以传入一个数组；对象展开运算符 ...mapState 函数返回的是一个对象，使用工具函数将多个对象合并为一个对象，最终把对象传给 computed 属性；https://blog.csdn.net/taoqidejingling/article/details/121298272

vuex getters、mapGetters、...mapGetters（三）_taoqidejingling的博客-CSDN博客getter 接收 state 作为他的第一个参数；访问 getter 中的数据有 2 中方式；https://blog.csdn.net/taoqidejingling/article/details/121311301

https://blog.csdn.net/taoqidejingling/article/details/121325206https://blog.csdn.net/taoqidejingling/article/details/121325206

vuex action、mapActions、...mapActions（五）_taoqidejingling的博客-CSDN博客action 和 mutation 的区别？Actions 支持同样的载荷方式和对象方式进行分发，​在组件中分发 ActionAction 类似于 mutation，不同在于：Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。注册一个简单的 action：const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (st.https://blog.csdn.net/taoqidejingling/article/details/121325999