用extend替代vuex的方案

store/index.js

import Vue from 'vue'

const store = Vue.extend({
    name: 'store',
    data() {
        return {
            count: 2,
            person: {
                name:'小明',
                age:23
            }
        }
    },
    methods:{
        changeAge(v){
            this.person.age=v
        }
    },
    computed: {
        dCount() {
            return this.count * this.count
        }
    }
})
export default new store

在main.js配置vue原型

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.prototype.$store = store;
new Vue({
  render: h => h(App),
}).$mount('#app')

在组件中使用

<template>
    <div class="container">
        <div>{{ $store.count }}*{{ $store.count }}={{ $store.dCount }}</div>
        <div>
            <button @click="$store.count++">add</button>
        </div>
        <div>
            姓名：
            <input type="text" v-model="$store.person.name" />
        </div>
        <div>年龄：{{ $store.person.age }}</div>
        <div>
            输入年龄:
            <input type="text" v-model="age" />
        </div>
        <div>
            <button @click="$store.changeAge(age)">resetAge</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            age: this.$store.person.age
        }
    },
    mounted() {
        console.log(this.$store, 'store')
    }
}
</script>

<style scoped lang="scss">
</style>

这样写就实现了数据，函数，计算属性等在不同组件中的复用，保证了数据更改后的视图变化，写法也没有vuex复杂，不用每次在mutations才能更改数据