VUE框架CLI组件化VueX模块化开发使用map实现自动生成代码实现Action发送AJAX请求------VUE框架

已于 2023-12-17 17:43:34 修改
阅读量952 收藏 22
点赞数 22
分类专栏： # VUE框架 AJAX 前端 文章标签： vue.js ecmascript javascript 前端框架 前端 vue ajax
于 2023-12-16 16:24:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2201_75960169/article/details/135034254
版权
前端 同时被 3 个专栏收录
350 篇文章 2 订阅
订阅专栏
VUE框架
250 篇文章 0 订阅
订阅专栏
AJAX
45 篇文章 0 订阅
订阅专栏
文章详细描述了如何在Vue项目中引入Vue、Vuex，使用混入、插件、状态管理（actions、mutations、state、getters）以及组件之间的交互，展示了如何使用render函数和模板编译器的替代方法。
摘要由CSDN通过智能技术生成 

// 这句话就等同于我们写的<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);

// 这句话就等同于我们写的<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);

import Vue from "vue";
import Vuex from "vuex";
import a from "./a.js";
import b from "./b.js";
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    modules : {
        ModuleA : a,
        ModuleB : b
    }
});

import Vue from "vue";

import Vuex from "vuex";

import a from "./a.js";

import b from "./b.js";

Vue.use(Vuex);

export default new Vuex.Store({

    modules : {

        ModuleA : a,

        ModuleB : b

    }

});

export default {
    namespaced : true,
    actions : {
        doA1(){
            console.log("AAAA1");
        }
    },
    mutations : {
        doA2(){
            console.log("AAAA2");
        }
    },
    state : {
        A : 1
    },
    getters : {
        computedA(){
            return 1;
        }
    }
};

export default {

    namespaced : true,

    actions : {

        doA1(){

            console.log("AAAA1");

        }

    },

    mutations : {

        doA2(){

            console.log("AAAA2");

        }

    },

    state : {

        A : 1

    },

    getters : {

        computedA(){

            return 1;

        }

    }

};

import axios from "axios";

export default {
    namespaced : true,
    actions : {
        doB1(){
            console.log("BBBB1");
        },
        displayBugs(context,value){
            axios.get("/api/vue/bugs").then(
            response => {
                context.commit("DISPLAY_BUGS",response.data);
            },
            error => {
                alert("服务器异常,请检查后再试");
                alert(error.message);
            }
            );
        }
    },
    mutations : {
        doB2(){
            console.log("BBBB2");
        },
        DISPLAY_BUGS(state,value){
            state.bugList = value;
        }
    },
    state : {  
        B : 1,
        bugList : []
    },
    getters : {
        computedB(){
            return 1;
        }
    }
};

import axios from "axios";

export default {

    namespaced : true,

    actions : {

        doB1(){

            console.log("BBBB1");

        },

        displayBugs(context,value){

            axios.get("/api/vue/bugs").then(

            response => {

                context.commit("DISPLAY_BUGS",response.data);

            },

            error => {

                alert("服务器异常,请检查后再试");

                alert(error.message);

            }

            );

        }

    },

    mutations : {

        doB2(){

            console.log("BBBB2");

        },

        DISPLAY_BUGS(state,value){

            state.bugList = value;

        }

    },

    state : {  

        B : 1,

        bugList : []

    },

    getters : {

        computedB(){

            return 1;

        }

    }

};

<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>

<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>

<template>
    <div>
        <h1>我是B</h1>
        <button @click="doB1()">actions</button>
        <button @click="doB2()">mutations</button>
        <h3>state : {{ B }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ computedB }}</h3>
        <button @click="displayBugs()">按一下展示Bugs信息</button>
        <ul>
            <li v-for="bug in bugList" :key="bug.id">{{ bug.desc }}</li>
        </ul>
    </div>
</template>

<script>
    import {mapState,mapActions,mapMutations,mapGetters} from "vuex";
    export default {
        name : "B",
        computed : {
            // B(){
            //     return this.$store.state.ModuleB.B;
            // }
            ...mapState("ModuleB",{B : "B"}),
            // ...mapState("ModuleB",["B"])
            ...mapGetters("ModuleB",["computedB"]),
            ...mapState("ModuleB",["bugList"])
        },
        methods : {
            // doB1(){
            //     // 开启命名空间之后需要指明
            //     this.$store.dispatch("ModuleB/doB1");
            // },
            // doB2(){
            //     // 开启命名空间之后需要指明
            //     this.$store.commit("ModuleB/doB2");
            // }
            ...mapActions("ModuleB",["doB1","displayBugs"]),
            ...mapMutations("ModuleB",["doB2"]),
            // showBugs(){
            //     this.$http.get("/api/vue/bugs").then(
            //     response => {
            //         this.bugList = response.data;
            //     },
            //     error => {
            //         alert("服务器异常,请检查后再试");
            //     }
            //     );
            // }
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是B</h1>

        <button @click="doB1()">actions</button>

        <button @click="doB2()">mutations</button>

        <h3>state : {{ B }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ computedB }}</h3>

        <button @click="displayBugs()">按一下展示Bugs信息</button>

        <ul>

            <li v-for="bug in bugList" :key="bug.id">{{ bug.desc }}</li>

        </ul>

    </div>

</template>

<script>

    import {mapState,mapActions,mapMutations,mapGetters} from "vuex";

    export default {

        name : "B",

        computed : {

            // B(){

            //     return this.$store.state.ModuleB.B;

            // }

            ...mapState("ModuleB",{B : "B"}),

            // ...mapState("ModuleB",["B"])

            ...mapGetters("ModuleB",["computedB"]),

            ...mapState("ModuleB",["bugList"])

        },

        methods : {

            // doB1(){

            //     // 开启命名空间之后需要指明

            //     this.$store.dispatch("ModuleB/doB1");

            // },

            // doB2(){

            //     // 开启命名空间之后需要指明

            //     this.$store.commit("ModuleB/doB2");

            // }

            ...mapActions("ModuleB",["doB1","displayBugs"]),

            ...mapMutations("ModuleB",["doB2"]),

            // showBugs(){

            //     this.$http.get("/api/vue/bugs").then(

            //     response => {

            //         this.bugList = response.data;

            //     },

            //     error => {

            //         alert("服务器异常,请检查后再试");

            //     }

            //     );

            // }

        }

    }

</script>

<style>

</style>

<template>
    <div>
        <h1>我是A</h1>
        <button @click="doA1()">actions</button>
        <button @click="doA2()">mutations</button>
        <h3>state : {{ A }}</h3>
        <!-- 有特殊符号,需要加上中括号才行 -->
        <h3>getters : {{ computedA }}</h3>
    </div>
</template>

<script>
    import {mapState,mapActions,mapGetters,mapMutations} from "vuex";
    export default {
        name : "A",
        computed : {
            // A(){
            //     return this.$store.state.A;
            // },
            // ...mapState({A : "A"}),
            ...mapState("ModuleA",["A"]),
            // computedA(){
            //     return this.$store.getters["computedA"];
            // }
            ...mapGetters("ModuleA",{computedA : "computedA"})
            // ...mapGetters(["computedA"])
        },
        methods : {
            // doA1(){
            //     // 开启命名空间之后需要指明
            //     this.$store.dispatch("doA1");
            // },
            // ...mapActions(["doA1"]),
            ...mapActions("ModuleA",{doA1 : "doA1"}),
            // doA2(){
            //     // 开启命名空间之后需要指明
            //     this.$store.commit("doA2");
            // }
            // ...mapMutations(["doA2"])
            ...mapMutations("ModuleA",{doA2 : "doA2"})
        }
    }
</script>

<style>

</style>

<template>

    <div>

        <h1>我是A</h1>

        <button @click="doA1()">actions</button>

        <button @click="doA2()">mutations</button>

        <h3>state : {{ A }}</h3>

        <!-- 有特殊符号,需要加上中括号才行 -->

        <h3>getters : {{ computedA }}</h3>

    </div>

</template>

<script>

    import {mapState,mapActions,mapGetters,mapMutations} from "vuex";

    export default {

        name : "A",

        computed : {

            // A(){

            //     return this.$store.state.A;

            // },

            // ...mapState({A : "A"}),

            ...mapState("ModuleA",["A"]),

            // computedA(){

            //     return this.$store.getters["computedA"];

            // }

            ...mapGetters("ModuleA",{computedA : "computedA"})

            // ...mapGetters(["computedA"])

        },

        methods : {

            // doA1(){

            //     // 开启命名空间之后需要指明

            //     this.$store.dispatch("doA1");

            // },

            // ...mapActions(["doA1"]),

            ...mapActions("ModuleA",{doA1 : "doA1"}),

            // doA2(){

            //     // 开启命名空间之后需要指明

            //     this.$store.commit("doA2");

            // }

            // ...mapMutations(["doA2"])

            ...mapMutations("ModuleA",{doA2 : "doA2"})

        }

    }

</script>

<style>

</style>

旧约Alatus
关注
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值