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')`
})