// 这句话就等同于我们写的<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);
<template>
<div>
<User></User>
<hr>
<Vip></Vip>
</div>
</template>
<script>
import Vip from "./components/Vip.vue"
import User from "./components/User.vue"
export default {
name : "App",
components : {Vip,User}
}
</script>
<style>
</style>
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const actions = {
saveUser(context,value){
context.commit("SAVE_USERS",value);
},
saveVip(context,value){
context.commit("SAVE_VIP",value);
}
};
const mutations = {
SAVE_USERS(state,value){
// unshift往第一个位置加东西,push往最后加东西
state.users.push(value);
},
SAVE_VIP(state,value){
// unshift往第一个位置加东西,push往最后加东西
state.vips.push(value);
}
};
const state = {
users : [
{id : "001",name : "Jack"},
{id : "002",name : "Rose"},
{id : "003",name : "Tom"},
{id : "004",name : "Jerry"}
],
vips : [
{id : "001",name : "Jack"},
{id : "002",name : "Rose"},
{id : "003",name : "Tom"},
{id : "004",name : "Jerry"}
]
};
export default new Vuex.Store({actions,mutations,state});
<template>
<div>
<h1>用户列表</h1>
<input type="text" v-model="username"/>
<button @click="saveUser()">保存用户</button>
<ul>
<li v-for="user in $store.state.users" :key="user.id">
用户名:{{ user.name }}
</li>
</ul>
<h3>当前用户数量{{ $store.state.users.length }}</h3>
<h3>当前会员数量{{ $store.state.vips.length }}</h3>
</div>
</template>
<script>
export default {
name : "User",
data(){
return {
username : ""
}
},
methods : {
saveUser(){
const id = this.$store.state.users.length + 1;
const user = {"id" : id,"name" : this.username};
this.$store.dispatch("saveUser",user)
this.username = "";
}
}
}
</script>
<style>
</style>
<template>
<div>
<h1>会员列表</h1>
<input type="text" v-model="username"/>
<button @click="saveVip()">保存用户</button>
<ul>
<li v-for="vip in $store.state.vips" :key="vip.id">
用户名:{{ vip.name }}
</li>
</ul>
<h3>当前用户数量{{ $store.state.users.length }}</h3>
<h3>当前会员数量{{ $store.state.vips.length }}</h3>
</div>
</template>
<script>
export default {
name : "Vip",
data(){
return {
username : ""
}
},
methods : {
saveVip(){
const id = this.$store.state.vips.length + 1;
const vip = {"id" : id,"name" : this.username};
this.$store.dispatch("saveVip",vip);
this.username = "";
}
}
}
</script>
<style>
</style>