vuex模块化的使用

yi碗吃不够

已于 2023-05-17 20:53:51 修改

阅读量425

点赞数

文章标签：前端 javascript 开发语言

于 2023-05-05 20:37:04 首次发布

本文链接：https://blog.csdn.net/weixin_46194350/article/details/130514686

版权

将vuex划分为模块化使用，便于管理优化

1. vuex的使用

vuex分为 state、mutation、action、getter

新建index.js作为vuex的主文件

import Vue from 'vue';
import Vuex from 'vuex';
import batchEdit from './batchEdit.js';

Vue.use(Vuex);

export default new Vuex.Store({
    // 将vuex划分为模块化，modules里可以取别的名称
    modules: {
        batchEdit,
    },

});

2. 新建模块化文件batchEdit.js

 export default {

    // 开启命名空间
    namespaced: true,

     // 存放数据
    state: {
        count: ''
    },

    // 同步修改数据使用
    mutations: {
        initState(state, value) {
            Object.assign(state, value);
        },
    },

    // 异步修改数据使用
    actions: {},

    // 简化数据使用,计算属性
    getters:{},

    // 模块化
    modules: {},

};

开启命名空间 namespaced:true

组件内使用

computed: {
        ...mapState('batchEdit', ['count',]),
    },

    // 提交vuex
    this.$store.commit('batchEdit/initState', {
        count: '',
    });