// 这句话就等同于我们写的<script src="vue.js">
// 这就是在引入vue
import Vue from 'vue';
// 然后下一步是导入我们的根组件
import App from './App.vue';
// 导入混入
import {mix1} from './mixin.js';
import {mix2} from './mixin.js';
import {mix3} from './mixin.js';
// 导入插件
import {p1} from './plugins';
import VueResource from 'vue-resource';
import store from "./vuex/store";
 
//全局混入
Vue.mixin(mix1);
Vue.mixin(mix2);
Vue.mixin(mix3);
 
// 插件的使用通常放在创建Vue对象之前
// 插上插件
Vue.use(p1,1,2,3,4);
// 使用这个插件后,所有的vm和vc都会多一个叫$http的属性
Vue.use(VueResource);
 
// 这是关闭生产提示信息
Vue.config.productionTip = false
 
// 创建一个共享的VueComponent构造函数
// const VueComponentConstructor = Vue.extend({});
// 创建一个共享的VC对象
// const globalvc = new VueComponentConstructor();
 
 
// 创建VUE实例对象VM
const vm = new Vue({
  // 增加了一个全新的配置项,store
  store : store,
  // 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store
  // 以后vm和vc的$store都可以获取到这个store对象
  // 删除render函数就会导致报错
  // 因为没有可用的模板翻译器
  // 使用完整的vue.js或使用render函数才能解决这个问题
  // 为什么采用模板编译器的Vue.js放到脚手架呢?
  // 目的是减小体积,VUE.js包括两类,核心和模板编译器
  // 模板编译器可能占用vue.js体积的三分之一
  // 将来打包的时候,模板编译器没有存在的必要了
  // 体积大就会影响速度
  // render函数被自动调用,且会自动传过来一个参数
  // 这个参数是一个函数,createElement是一个函数
  // 这个函数可以用来创建元素
  // 用这个来创建元素就可以省掉我们的vue模板编译器了
  // render(createElement)
  // {
  //   return createElement(App);
  // }
  // 简写就是这个箭头函数
  render: h => h(App),
  // 利用生命周期机制,在对象创建时把我们的vm作为这个对象
  beforeCreate(){
    Vue.prototype.$bus = this;
  }
}).$mount('#app');
// 这里用的是$mount的方式绑定和el的方式是一样的
 
console.log(vm);
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
import Vue from "vue";
import Vuex from "vuex";
 
Vue.use(Vuex);
 
// 怎么拆分模块,VUEX建议一个功能一个模块
// 拆分成两个模块
// 两个模块一人一个对象
 
import a from "./a.js";
import b from "./b.js";
import c from "./c.js";
 
export default new Vuex.Store({
    // 模块配置
    modules : {
        // 模块名 : 模块
        ModuleA : a,
        ModuleB : b,
        ModuleC : c
    }
});
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
// A业务和B业务
// a模块
export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("action A1");
        }
    },
    mutations : {
        doA2(){
            console.log("mutation A2");
        }
    },
    state : {
        A : 1
    },
    getters : {
        computedA(){
            return 1;
        }
    }
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doB1(){
            console.log("action B1");
        }
    },
    mutations : {
        doB2(){
            console.log("mutation B2");
        }
    },
    state : {
        B : 1
    },
    getters : {
        computedB(){
            return 1;
        }
    }
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
export default {
    // 开启命名空间
    namespaced : true,
    actions : {
        doA1(){
            console.log("C的doA");
        }
    }
};
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
<template>
    <div>
        <A></A>
        <hr>
        <B></B>
    </div>
</template>
 
<script>
    import A from "./components/A.vue";
    import B from "./components/B.vue";
    export default {
        name : "App",
        components : {A,B}
    }
</script>
 
<style>
 
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
<template>
    <div>
        <h1>我是A</h1>
        <button @click="doA1()">actions</button>
        <button @click="doA2()">mutations</button>
        <h3>state : {{ $store.state.ModuleA.A }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleA/computedA"] }}</h3>
    </div>
</template>
 
<script>
    export default {
        name : "A",
        methods : {
            doA1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleA/doA1");
            },
            doA2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleA/doA2");
            }
        }
    }
</script>
 
<style>
 
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
<template>
    <div>
        <h1>我是B</h1>
        <button @click="doB1()">actions</button>
        <button @click="doB2()">mutations</button>
        <h3>state : {{ $store.state.ModuleB.B }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ $store.getters["ModuleB/computedB"] }}</h3>
    </div>
</template>
 
<script>
    export default {
        name : "B",
        methods : {
            doB1(){
                // 开启命名空间之后需要指明
                this.$store.dispatch("ModuleB/doB1");
            },
            doB2(){
                // 开启命名空间之后需要指明
                this.$store.commit("ModuleB/doB2");
            }
        }
    }
</script>
 
<style>
 
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.