VUE框架CLI组件化VueX的工作原理及程序演示------VUE框架

旧约Alatus

已于 2023-12-17 17:38:22 修改

阅读量1.4k

点赞数 49

分类专栏： # VUE框架前端文章标签： vue.js 前端 javascript 前端框架 ecmascript vue json

于 2023-12-13 16:26:58 首次发布

本文链接：https://blog.csdn.net/2201_75960169/article/details/134975533

版权

前端同时被 2 个专栏收录

329 篇文章 2 订阅

订阅专栏

VUE框架

250 篇文章 0 订阅

订阅专栏

// vuex插件维护了一个共享对象store,store中有state属性
// 这个state中存储的数据就是组件全局共享的,一处修改处处生效
// 全局事件总线$bus主要针对的是数据传递,而store针对的则是共享数据
// 这个store对象是vuex插件中最核心的对象
// 这个对象store是用来管理这个actions对象和mutation对象和state对象的

// 引入插件
import Vuex from "vuex";
import Vue from "vue";

// 使用插件
Vue.use(Vuex);

// 这三个也是vuex的核心对象,他们受到store的管理
// 创建三个对象,传进去即可
const actions = {
    // N多个action
    // 每一个action都是一个callBack回调函数
    // 我们在action里面编写复杂的业务逻辑
    // 原则如下,action是专门处理业务逻辑或者发送AJAX请求的    
    // plusOne : function(context,value){
    //     this.$store.state.num = this.count;
    // }
    // 简写为如下
    // 这里的两个参数,context是Vue的上下文,value参数就是传过来的参数
    plusOne(context,value){
        // 处理业务
        value = value + 1;
        // 继续向下一个环节走
        // 轮到数据更新
        // 提交上下文环境
        console.log(value);
        context.commit("PLUS_ONE",value);
    }
};
const mutations = {
    // 这里是N多个mutation
    // 每一个mutation都是一个回调函数
    // 每一个mutation回调函数作用就是更新state
    // 因为state的数据是响应式的,一旦更新,页面就刷新了
    // state是状态对象,value是传过来的参数
    PLUS_ONE(state,value){
        console.log(value);
        // 这里是累加,但是我没搞懂...
        state.num += value;
        console.log(value);
    }
};
// 等同于Vue当中的data(只不过这里不叫数据叫状态)
// 状态对象(数据对象),已经做了响应式处理的
const state = {
    num : 0
};

// // 创建store对象
// const store = new Vuex.Store({
//     // 这里的配置项是固定的
//     // 它是一个负责执行某个行为的对象
//     actions : actions,
//     // 它是一个负责更新的对象
//     mutations : mutations,
//     // state是状态对象
//     state : state
// });

// // 导出store对象,对外暴露
// export default store;

// 简写形式
export default new Vuex.Store({actions,mutations,state});
// vuex插件维护了一个共享对象store,store中有state属性

// 这个state中存储的数据就是组件全局共享的,一处修改处处生效

// 全局事件总线$bus主要针对的是数据传递,而store针对的则是共享数据

// 这个store对象是vuex插件中最核心的对象

// 这个对象store是用来管理这个actions对象和mutation对象和state对象的

// 引入插件

import Vuex from "vuex";

import Vue from "vue";

// 使用插件

Vue.use(Vuex);

// 这三个也是vuex的核心对象,他们受到store的管理

// 创建三个对象,传进去即可

const actions = {

// N多个action

// 每一个action都是一个callBack回调函数

// 我们在action里面编写复杂的业务逻辑

// 原则如下,action是专门处理业务逻辑或者发送AJAX请求的

// plusOne : function(context,value){

// this.$store.state.num = this.count;

// }

// 简写为如下

// 这里的两个参数,context是Vue的上下文,value参数就是传过来的参数

plusOne(context,value){

// 处理业务

value = value + 1;

// 继续向下一个环节走

// 轮到数据更新

// 提交上下文环境

console.log(value);

context.commit("PLUS_ONE",value);

}

};

const mutations = {

// 这里是N多个mutation

// 每一个mutation都是一个回调函数

// 每一个mutation回调函数作用就是更新state

// 因为state的数据是响应式的,一旦更新,页面就刷新了

// state是状态对象,value是传过来的参数

PLUS_ONE(state,value){

console.log(value);

// 这里是累加,但是我没搞懂...

state.num += value;

console.log(value);

}

};

// 等同于Vue当中的data(只不过这里不叫数据叫状态)

// 状态对象(数据对象),已经做了响应式处理的

const state = {

num : 0

};

// // 创建store对象

// const store = new Vuex.Store({

// // 这里的配置项是固定的

// // 它是一个负责执行某个行为的对象

// actions : actions,

// // 它是一个负责更新的对象

// mutations : mutations,

// // state是状态对象

// state : state

// });

// // 导出store对象,对外暴露

// export default store;

// 简写形式

export default new Vuex.Store({actions,mutations,state});

// 这句话就等同于我们写的<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
  // 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store
  // 以后vm和vc的$store都可以获取到这个store对象
  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

// 加上这个配置项之后,vm及其所有的vc对象上都会有这个属性$store

// 以后vm和vc的$store都可以获取到这个store对象

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

<template>
  <div>
    <h1>{{ $store.state.num }}</h1>
    <button @click="add()">点我加1</button>
  </div>
</template>

<script>
export default {
    name : "App",
    // 这个数据应该来自共享对象store的state对象
    data (){
        return {
            count : 0
        }
    },
    methods : {
        add(){
            // 这里的代码实际开发时比较复杂,业务逻辑复杂,代码比较多
            // this.$store.state.num++;

            // 调用Vuex的API
            // dispatch是vuex的API,调用这个方法以后,store对象的plusOne会被调用
            // dispatch翻译为分化
            this.$store.dispatch('plusOne',this.count);
        }
    }
}
</script>

<style>

</style>
<template>

<div>

<h1>{{ $store.state.num }}</h1>

<button @click="add()">点我加1</button>

</div>

</template>

<script>

export default {

name : "App",

// 这个数据应该来自共享对象store的state对象

data (){

return {

count : 0

}

},

methods : {

add(){

// 这里的代码实际开发时比较复杂,业务逻辑复杂,代码比较多

// this.$store.state.num++;

// 调用Vuex的API

// dispatch是vuex的API,调用这个方法以后,store对象的plusOne会被调用

// dispatch翻译为分化

this.$store.dispatch('plusOne',this.count);

}

}

}

</script>

<style>

</style>