Vuex的学习笔记二：核心概念State和Mutation的理解和使用「建议收藏」

一.State

1.1State的自我介绍

State提供了唯一的数据公共源，所有共享的数据都要统一放到store的state进行存储；

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count:0, //在state中存储一个count数据
  },
})

1.2组件访问State中数据的方式

一些组件如果想用到state中的数据怎么办（也就是读取state中的数据），不要急，它给我们提供了以下两种方法：

第一种方式：$store.state.数据名

由于 Vuex 的状态存储是响应式的，从 store 实例中读取状态最简单的方法就是在计算属性 (computed)中返回某个状态：

<template>
   <div> 
      <p>从state中拿到的{
  
  {conut}}</p>
       <!-- 或者-->
      <p>从state中拿到的{
  
  {$store.state.count}}</p>
   </div>
</template>

<script>
export default {
    computed: {
        conut() {
            return this.$store.state.count
        }
    },
}
</script>
<style></style>

第二种方式：mapState 辅助函数

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

<template>
   <div> 
      <p>从state中拿到的{
  
  {conut}}</p>
   </div>
</template>

//从Vuex中按需导入mapState 函数
import { mapState } from 'vuex'

<script>
export default {
    computed: {
    //将全局数据映射为当前组件的计算属性
      ...mapState (['conut'])
    },
}
</script>
<style></style>

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 调用。

<template>
   <div> 
      <p>从state中拿到的{
  
  {$store.state.count}}</p>
      <button @click = "addCount"></button>
   </div>
</template>

//从Vuex中按需导入mapMutations函数
import {mapMutations} from 'vuex'

<script>
export default {
    methods:{
      // 第二种方式：将 `this.addCount()` 映射为 `this.$store.commit('add')`
      //...mapMutations(['add'])，
      
      addCount(){
        //第一种方式：使用 this.$store.commit('xxx') 提交 mutation
        this.$store.commit('add') 
      }
    }
}
</script>
<style></style>

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调用更改函数并提交参数

<template>
   <div> s
      <p>从state中拿到的{
  
  {$store.state.count}}</p>
      <button @click = "addCount"></button>
   </div>
</template>

<script>
export default {
    methods:{
      addCount(){
        //第一种方式：使用 this.$store.commit('xxx') 提交 mutation
        var num = 5
        this.$store.commit('add' ，num ) 
      }
    }
}
</script>
<style></style>

今天的文章Vuex的学习笔记二：核心概念State和Mutation的理解和使用「建议收藏」分享到此就结束了，感谢您的阅读。