Vue项目实战-零碎笔记

v-model语法糖实现

index.vue中：

<template>
	<div>
    	<PersonalInfo v-model="phoneInfo" :zip-code.sync="zipCode"/>
//v-model方式和下列方式等效
        <PersonInfo
			:phone-info="phoneInfo"
			:zip-code="zipCode"
			@change="val => (phoneInfo = val)"
			@update:zipCode="val => (zipCode = val)"
		/>
         phoneInfo:{{phoneInfo}}
		<br />
         zipCode: {{zipCode}}
    div>
template>
<script>
import PersonalInfo from "./PersonalInfo";
export default {
    components: {
        PersonalInfo
    },
    data() {
        return {
            phoneInfo: {
                areaCode: "+86",
                phone:""
            },
            zipCode:""
        };
    }
}
script>

personalInfo.vue文件：

<template>
	<div>
	<input
           :value="phoneInfo.phone"
           type="number"
           placeholder="手机号"
           @input="handlePhoneChange"
     />
      <input
             :value="zipCode"
             type="number"
             placeholder="邮编"
             @input="handleZipCodeChange"
             />                                       
	div>
template>
<script>
export default {
    name: "PersonalInfo",
    model: {
        prop:"phoneInfo",
        event:"change"
    },
    props: {
        phoneInfo:Object,
        zipCode:String
    },
    methods: {
        handleAreaCodeChange(e) {
            this.$emit("change", {
                ...this.phoneInfo,
                areaCode:e.target.value
            });
        },
        handlePhoneChange(e) {
            this.$emit("change", {
                ...this.phoneInfo,
                phone:e.target.value
            });
        },
        handleZipCodeChange(e) {
            this.$emit("update:zipCode",e.target.value)
        }
    }
}
script>

min-Vuex实现

在min-vuex.js中：

import Vue from 'vue';
const Store = function Store (options = {}) {
	const {state = {}, mutations = {}} = options;
	this._vm = new Vue({
		data: {
			$$state: state//通过把state放入new Vue({})的data选项里，使state变成响应式数据
		},
	})
	this._mutations = mutations;
}

Store.prototype.commit = function(type, payload) {
	if(this._mutations[type]) {
		this._mutations[type](this.state, payload)
	}
}

Object.defineProperties(Store.prototype, {
	state: {
		get: function() {
			return this._vm._data.$$state;
		}
	}
});

export default {Store}

在main.js中：

import Vue from 'vue';
import Vuex from './min-vuex';
import App from './App.vue';
Vue.use(Vuex);
Vue.config.productionTip = false;
const store = new Vuex.Store({
    state: {
        count:0,
    },
    mutations: {
        increment(state) {
            state.count++
        }
    },
})
Vue.prototype.$store = store;
new Vue({
    render: h => h(App),
}).$mount('#app')

App.vue中：

<template>
<div id="app">
	{{count}}
    <button @click="$store.commit('increment')">count++button>
div>
template>
<script>
export default {
    name:'app',
    computed:{
        count() {
            return this.
        }
    }
}
script>