Vuex的学习笔记二：核心概念State和Mutation的理解和使用

第二种方式：mapState 辅助函数

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

从state中拿到的{{conut}}

//从Vuex中按需导入mapState 函数

import { mapState } from ‘vuex’

1.3组件通过哪些方式改变State中数据

---

只有通过Mutation才能变更Store的数据，请仔细阅读下面Mutation的详细介绍；

二.Mutation

=========================================================================

2.1Mutation的自我介绍

---

1. 只有通过Mutation才能变更Store的数据，不能直接在组件中操作Store的数据；

2. 在Mutation统一操作Store的数据虽然比较繁琐，但是便于集中监控所有数据的变化；

3. 一条重要的原则就是要记住 mutation 必须是同步函数，一些异步函数我们要放到后面讲的action中处理；（为什么呢？大家可以看一下官网，有详细介绍。）

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count:0, //在state中存储一个count数据

},

mutations: {

add(state){

//变更state中的count数据

state.count++

}

}，

})

2.2组件通过触发Mutation来改变数据

---

你可以在组件中使用 this.$store.commit(‘xxx’) 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用。

从state中拿到的{{$store.state.count}}

<button @click = “addCount”>

//从Vuex中按需导入mapMutations函数

import {mapMutations} from ‘vuex’

2.3组件触发Mutation时传递参数

---

首先要在mutations中写好接受参数的函数

import Vue from ‘vue’

import Vuex from ‘vuex’

Vue.use(Vuex)

const store = new Vuex.Store({

state: {

count:0, //在state中存储一个count数据

},

mutations: {

add(state，num){

//变更state中的count数据

state.count += num

}

}，

})

组件触发Mutation调用更改函数并提交参数

s

从state中拿到的{{$store.state.count}}

<button @click = “addCount”>