vuex 新手入门简介

瞿云天

已于 2023-04-06 15:01:54 修改

阅读量52

点赞数

分类专栏： vuex vue 文章标签： javascript 前端开发语言 vue

于 2023-04-06 14:46:06 首次发布

本文链接：https://blog.csdn.net/neusoft_hao/article/details/129988875

版权

vue 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

vuex

2 篇文章 0 订阅

订阅专栏

本文介绍了Vuex的核心组件，包括state（数据存储）、getters（数据获取方法）、actions（异步操作）、mutations（同步状态变更）以及modules（模块化）。通过一个简单的示例展示了如何在Vuex中定义和使用这些组件，如state中存放数据，mutations更新state，getters处理数据，actions进行异步操作，并利用modules对大型项目的管理。

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

Vuex核心就是 store，里面包括:
（1）state（数据）用来存放数据源
（2）getters（数据方法封装) 修改封装数据方便快捷方法
（3）actions（异步事件）用 dispatch 调用，注意：封装时候需要commit结合
（4）mutations（同步执行方法）更新state数据源方法，用 commit 调用
（5）modules（分模块）大型项目必备

下面看看简单示例，简单通俗易懂：

import Vuex from 'vuex'
const moduleStoreCart = {
    state:{
        cart:0,
        cartEnglish:10,
        cartExpire:1
    },
    mutations:{
        carAdd(state,data){
            state.cart +=  data.count
        }
    },
    getters:{
        cartExpire:(state)=>{
            return function(data){
                return  state.cartExpire+data
            }
        },
        cartAll:(state,getters)=>{
            console.log(getters);
            return state.cart + state.cartEnglish
        }
    },
    actions:{
        apiUpdate(context){
            return  new Promise((resolve, reject) => {
                let status = 0;
                context.commit("carAdd",{count:1})
                if(status){
                    reject() //成功
                }else{
                    resolve()  //失败
                }
            })
        }
    }
}


const moduleStoreUser = {
    state:{
        user:{token:"666",id:"123"}
    },
    mutations:{

    },
    getters:{

    },
    actions:{

    }
}


const store = new Vuex.Store({
    state:{
        public:{
            data:"公共"
        }
    },
    mutations:{

    },
    getters:{

    },
    actions:{

    },
    modules:{
        cart:moduleStoreCart,
        user:moduleStoreUser
    }
})


export  default store;