前端学习笔记（15）-Vue3状态管理store及Vuex的使用

作者：System 时间：2024年08月21日分类：所有,typescript 字数：652




<template>
  <div>
    <h1>Vuex 示例</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
    <button @click="decrement">减少</button>
  </div>
</template>
 
<script>
import { mapState, mapMutations } from 'vuex';
 
export default {
  computed: {
    // 使用对象展开运算符将此组件的计算属性添加到组件的计算属性中
    ...mapState({
      count: state => state.count
    })
  },
  methods: {
    // 使用对象展开运算符将此组件的方法添加到组件的方法中
    ...mapMutations({
      increment: 'INCREMENT',
      decrement: 'DECREMENT'
    })
  }
};
</script>

这个简单的Vue组件展示了如何使用Vuex来管理状态。它使用mapState帮助器函数来访问状态，并使用mapMutations帮助器函数来提交变更。这是一个更加符合现代Vue开发实践的示例。

前端学习笔记（15）-Vue3状态管理store及Vuex的使用

评论已关闭

推荐阅读