Vue開發中怎麼去處理多人協做開發(二) ---- Vuex篇

時間 2019-11-06

標籤 vue 開發怎麼處理多人 vuex 简体版

原文原文鏈接

前言

在上篇文章中咱們對於的Vue的路由作了模塊化的管理，方便在項目開發中更好的管理好本身的路由，同時也減低耦合性和維護成本。若是你對於路由篇感興趣的話能夠閱讀一下Vue路由篇，有什麼不足的地方或有好的想法，歡迎在評論下方留言！廢話很少說，咱們開搞！vue

行動

安裝

以vue-cli爲例子，當咱們搭好腳手架的時候，咱們能夠經過npm下載Vuexvuex

npm install vuex --savevue-cli

建立Vuex的統一入口

在src文件夾下建立store文件，在store文件下建立index.js導入Vuexnpm

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: '<App/>'
});
複製代碼

建立本身的文件統一入口

在store文件下建立modules文件夾，在modules文件夾下建立屬於本身的文件夾

例如： bash

在你的文件夾下寫一個測試文件，目的是測試一下，是否有效，在這裏我建立一個文件 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
}
複製代碼

在store文件下建立public文件夾，在public文件夾下建立屬於的文件入口好比說個人是Felix.js,用來管理到時候你本身的文件，導入咱們剛剛寫好的dome.js

import demo from '../modules/Felix/demo'
const Felix = {
    ...demo
}
export default Felix;
複製代碼

在咱們剛剛寫好的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

寫一個組件

<template>
  <div id="HelloWorld">
   <span>{{test}}</span>
   <button @click="changTest('5555')">改變test方法</button>
  </div>
</template>

<script>
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    // 獲取狀態倉庫的batch
    <!--mapGetters("文件夾名稱",數組|對象)-->
    ...mapGetters("Felix", {
      test: "getTest"
    }),
  },
  methods: {
   <!--mapGetters("文件夾名稱",數組|對象)-->
   <!--數組寫法-->
   ...mapMutations("Felix", ["changTest"])
   <!--對象寫法-->
   <!--注意，調用方法是調用changValue而不是changTest-->
    // ...mapMutations("Felix", {
    //   changValue: "changTest"
    // })
  },
  mounted() {
    console.log(this.test); //{a: "Felix"}
  }
};
</script>
複製代碼