学习笔记-vuex核心概念(三)-mutations同步函数

Rose Thief

已于 2024-06-08 14:00:38 修改

阅读量129

点赞数 2

文章标签：学习笔记前端

于 2024-06-08 13:59:55 首次发布

本文链接：https://blog.csdn.net/qq_63064285/article/details/139545771

版权

前提

vuex是单向数据流，在组件中我们不能直接修改仓库的数据，我们需要使用mutations来修改仓库的数据

mutations的使用

this.$store.commit('xxx", 参数)

mutations中的方法只能携带一个参数，如果非要传递多个参数，可以写成传递数组或对象的形式

index.js

state: {
    userInfo: {
      username: '张三',
      userage: 8
    },
  },

mutations: {
    updateUserage (state, newage) {
      state.userInfo.userage = newage
    }
  },

渲染页面

<template>
    <div>
      <p>{{ $store.state.userInfo.userage }}</p>
      <button @click="handleUpdate()">更改年龄</button>
    </div>
</template>

<script>

export default {
  computed: {

  },
  methods: {
    handleUpdate () {
      this.$store.commit('updateUserage', 20)
    }
  }
}
</script>

<style>

</style>

运行结果

mapMutations辅助函数的使用

帮我们封装函数，可以直接使用

<template>
    <div>
      <p>{{ $store.state.userInfo.userage }}</p>
      <button @click="updateUserage(21)">更改年龄</button>
    </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {

  },
  methods: {
    ...mapMutations(['updateUserage']),
  }
}
</script>

<style>

</style>

运行结果