Vue知识点整理

vue.observable可以实现简单的跨组件数据共享的情况，相比于vuex更加轻量级。 下面是官方文档的介绍：

import Vue from 'vue';

export let store = Vue.observable({count: 0, name: '小明'});
export let mutations={
    setCount(count){
        store.count=count;
    },
    changeName(name){
        store.name=name;
    }
}

 <template>  
        <div class="container">  
            <button @click="setCount(count+1)">+1</button>
            <button @click="setCount(count-1)">-1</button>
             <div>store中count：{{count}}</div>
            <button @click="changeName(name1)">父页面修改name</button>
            <div>store中name：{{name}}</div>
        </div>  
    </template>  
    <script>  
        import HomeHeader from '../components/HomeHeader'   
        import { store, mutations } from '@/store'
        export default {  
            data () {  
                return {  
                    name1:'主页的name'
                }  
            },  
            components: {  
                HomeHeader 
            },  
            computed:{
                count(){
                    return store.count
                },
                name(){
                    return store.name
                }
            },
            methods:{
                setCount:mutations.setCount,
                changeName:mutations.changeName    
            }
        }  
    </script>