Vue开发中怎么去处理多人协作开发(二) ---- Vuex篇

前言

在上篇文章中我们对于的Vue的路由做了模块化的管理，方便在项目开发中更好的管理好自己的路由，同时也减低耦合性和维护成本。如果你对于路由篇感兴趣的话可以阅读一下Vue路由篇，有什么不足的地方或有好的想法，欢迎在评论下方留言！废话不多说，我们开搞！

行动

安装

以vue-cli为例子，当我们搭好脚手架的时候，我们可以通过npm下载Vuex

npm install vuex --save

创建Vuex的统一入口

在src文件夹下创建store文件，在store文件下创建index.js导入Vuex

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
    
    modules: {
    },
    
    strict: process.env.NODE_ENV !== 'production'
});
export default store;

在src - main.js引入store - index.js

import store from './store/index';
new Vue({
    el: '#app',
    store,
    components: { App },
    template: ''
});

创建自己的文件统一入口

1. 在store文件下创建modules文件夹，在modules文件夹下创建属于自己的文件夹

例如：

modules文件夹

在你的文件夹下写一个测试文件，目的是测试一下，是否有效，在这里我创建一个文件 dome.js

测试文件

const state = {
    Felix: {
        a: "Felix"
    }, //测试
}
const getters = {
    getTest(state) {
        return state.Felix;
    }
}
const mutations = {
    changTest(state, value) {
        state.Felix = value
    }

}
const actions = {
    // 异步方法
    actionTest(context, value) {
        // 异步改变对话框的状态
        context.commit(changTest, value)
    }
}
export default {
    namespaced: true, //用于在全局引用此文件里的方法时标识这一个的文件名
    state,
    getters,
    mutations,
    actions
}

2. 在store文件下创建public文件夹，在public文件夹下创建属于的文件入口比如说我的是Felix.js,用来管理到时候你自己的文件，导入我们刚刚写好的dome.js

import demo from '../modules/Felix/demo'
const Felix = {
    ...demo
}
export default Felix;

3. 在我们刚刚写好的src - store.js导入public - Felix.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import Felix from './public/Felix'
Vue.use(Vuex);
const store = new Vuex.Store({
    modules: {
        Felix
    },
    strict: process.env.NODE_ENV !== 'production'
});
export default store;

在组件中使用Vuex

1. 写一个组件

这样我们就把Vuex模块化处理已经完成！

---

最后

谢谢大家！希望能对你们有所帮助，有什么问题可以在评论下方提出，期待有更好的解决方案，学习一下！我下篇可能会写关于Vue+TS的文章，敬请期待！

请勿未经允许转载，谢谢合作

联系我:652165177(QQ)