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

偏执的太偏执、 2022-12-27 02:13 174阅读 0赞

### Vuex的主要核心概念 ###

*  一.State
 *   *  1.1State的自我介绍
     *  1.2组件访问State中数据的方式
     *   *  第一种方式：$store.state.数据名
         *  第二种方式：mapState 辅助函数
     *  1.3组件通过哪些方式改变State中数据
 *  二.Mutation
 *   *  2.1Mutation的自我介绍
     *  2.2组件通过触发Mutation来改变数据
     *  2.3组件触发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>