vuex的五个属性分别是什么，区别和用途。

最新推荐文章于 2023-03-07 08:43:49 发布

温情key

最新推荐文章于 2023-03-07 08:43:49 发布

阅读量1.5k

点赞数 8

分类专栏： vue 文章标签： vue vue.js es6 前端

本文链接：https://blog.csdn.net/qq_48960335/article/details/117571310

版权

本文介绍了Vuex框架的五个关键属性：state作为数据源，getters作为计算属性提供共享逻辑，mutations用于同步更新state，actions处理异步操作，以及module实现模块化管理，方便大型项目的状态管理。

摘要由CSDN通过智能技术生成

一、state

可以看作 data 数据
存储状态(数据源)，通过 this.$store.state.(状态) 获取; 当一个组件获取多种状态的时候，为了方便可以使用 mapState 辅助函数来帮我们生成。

// state.js
export default{
   
    num: 0,
    msg: "温情",
    age: 22
}

import {
   mapState} from 'vuex'
let mapStateData = mapState(['num', 'msg', 'age'])

export default {
   
    computed: {
   
        ...mapStateData
    }
}

二、getters

可以看作 computed 计算属性
改变状态(数据源)的方法,做一些简单的逻辑运算,多个组件想用相同的数据就不用再写多遍相同的逻辑。
- 获取 getters 状态的方法：

// getters.js
export default {
   
    reverseMsg: function(state) {
   
        return state.msg.split("").reverse().join("");
    },
    minMsg: function(state) {
   
        return "123"