Vue中的Vuex配置以及使用

T-腾腾

已于 2022-03-18 17:56:49 修改

阅读量1k

点赞数

文章标签： vue.js javascript 前端

于 2022-03-18 17:41:43 首次发布

本文链接：https://blog.csdn.net/m0_50832030/article/details/123580605

版权

本文介绍了如何使用Vuex进行状态管理，包括在store.js中初始化数据、定义actions和mutations，以及组件中如何读取和修改Vuex状态。通过$store.state访问数据，$store.dispatch或$store.commit调用方法，实现组件与Vuex的数据交互。

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

1、初始化数据、配置actions、mutations、state、getters，来操作文件store.js(创建在src文件下)

//引入Vue核心文件
import Vue from 'vue';

//引入Vuex
import Vuex from 'vuex';
//引用Vuex
Vue.use(Vuex);

const actions = {
    //响应组件中加的动作
    jia(context,value)
    {
        context.commit('JIA',value);
    }
};

const mutations = {
    //执行加
    JIA(context,value)
    {
        context.sum+=value;
    }
};

//初始化数据
const state = {
    sum:0,
};

//加工state中的数据使用
const getters = {
    bigSum(state){
        return state.sum * 10;
    }
}

//创建并且默认暴露store
export default new Vuex.Store(
{
    actions,
    mutations,
    state,
    getters
})

2、组件中读取vuex中的数据：$stort.state.sum

3、组件中修改vuex中的数据：$store.dispatch('actions中的方法名',数据)或$store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以超越actions，即不屑dispatch，直接编写commit

4、组件中读取数据：$store.getters.bigSum