vuex5大核心和4大金刚(辅助函数)用法_vuex辅助函数四大金刚-CSDN博客

本文链接：https://blog.csdn.net/iseyre/article/details/122201145

本文详细介绍了Vuex的状态管理工具，包括其5大核心——state、mutations、actions、getters和module的用法。通过实例展示了如何在页面中调用和修改Vuex的state，以及如何进行异步操作。同时，还探讨了module模块化管理和getters计算属性的使用，并提到了辅助函数mapState、mapGetters等的实践。此外，文章还提及了如何在实际项目中引入和使用这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vuex是状态管理工具，任何组件都可以使用vuex里的公共数据。

vuex5大核心及其用法：

state：vuex里用于存放数据和变量

mutations：唯一可以改变state数据的

actions：异步操作

getters：相当于计算属性

在页面中调用vuex中state的数据可以这样写：

<div>{{$store.state.值}}</div>

想要更改vuex里的数据必须使用this.$store.commit()传到vuex，然后在vuex的mutations中修改：

export default {
    data() {
        return {};
    },
    created() {},
    methods: {
      a(){
        this.$store.commit('事件名',要传递的数据 )
      }
    },
    components:{}
};

actions是异步操作：

比如在异步中请求json数据可以这样写：

1、定义的函数第一个参数是‘context’，然后使用context.$commit(‘事件名’，res数据)传递到mutations中。记得在mutations定义事件

    mutations: {
    setlist(state,val){
   


    },
    actions: {
    getlist(context){
      axios.get('/data.json').then(res=>{
        console.log(res)
      context.commit('setlist',res.data)

      })

    }
  },

2、最后记得在主页面触发异步操作

  created() {
    this.$store.dispatch("getlist");
  },

module 模块化用法：

每一个模块都有完整的5大属性，可以在里面定义属性

  modules: {
    a:{
      state:{
        num:1000
      },
      mutations: {
      },
      actions: {
      },
    }
  }

使用时直接在页面中写，如下：

    {{$store.state.a.num}}

getters计算属性，和vue计算属性性质一样

4大辅助函数：

mapState 在计算属性中展开

mapGetters 在计算属性中展开

mapMutations 在方法中展开

mapActions 在方法中展开

谁要使用就引入对应的辅助函数：

import {mapState,mapGetters......} from 'vuex'

mapState例子：

 computed: {
    ...mapState({
      aaa: "num",
    }),

最后直接插值就能展示出相应的数据了