uniapp开发常用辅助函数mapState、mapMutations和computed来映射vue属性和方法

1、如果要获取store里面的state的city属性。首先来看看没有使用mapState的情况      

  {{this.$store.state.city}}

再来看看使用mapState后   {{this.city}}

那么为什么会这样呢？先来看看官方的定义：

        当一个组件需要获取多个状态时候，将这些状态都声明为计算属性时，会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键：

首先什么是状态？即state，state又是用来存储一些数据的，所以不难理解。

// store.js

/* vuex的核心管理对象模块:store  */
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
// 状态对象
const state = { // 初始化状态 这里放置的状态可以被多个组件共享
  count: 1,
  name: 'daming'
}
const mutations = {}
const action = {}
const getters = {}

export default new Vuex.Store({
  state, // 状态
  mutations, // 包含多个更新state函数的对象
  actions, // 包含多个队形事件回调函数的对象
  getters // 包含多个getter计算属性函数的对象
})

2、代码中使用

import {mapState} from "vuex"
// 使用mapState, 此时，city已经被映射了，所以可以直接使用 this.city 去获取属性值
computed:{
    //意思是将vuex中的city数据映射到组件的computed属性里
    ...mapState(["city"])
}

1. html 中直接使用 city
2. js中使用 this.city

3.第三种使用方式

        还有一种使用方法,意思是将store里面的state里面的city属性映射到computed属性中的 currentCity 中。即 currentCity 代表了 $store.state.city  

​​computed:{ ...mapState({ currentCity:"city" }) }​​

1.使用 Vuex 并不意味着你需要将所有的状态放入 Vuex。虽然将所有的状态放到 Vuex 会使状态变化更显式和易调试，但也会使代码变得冗长和不直观。

2.如果有些状态严格属于单个组件，最好还是作为组件的局部状态。你应该根据你的应用开发需要进行权衡和确定。

3.由于 Vuex 的状态存储是响应式的，所以可以使用计算属性来获得某个状态

4.当状态改变时，都会重新求取计算属性，并且触发更新相关联的 DOM

5.通过下面的计算属性，就可以在当前组件中访问到count,name,nameAlias等了 在模板中我们通过大括号符号打印出来。 


 

4.在组件中提交 Mutation：
你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
} 

若是按照模块来写的，只需在前面加上模块的名字，如上中的第三个：

   ...mapMutations("moudleA"{
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('/moudleA/increment')`
    })