用extend替代vuex的方案

Vue.js 中的数据管理与组件通信实践

最新推荐文章于 2025-05-25 17:14:18 发布

原创最新推荐文章于 2025-05-25 17:14:18 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

笔记同时被 3 个专栏收录

7 篇文章

订阅专栏

6 篇文章

订阅专栏

vue

4 篇文章

订阅专栏

本文展示了如何在 Vue.js 应用中通过创建一个简单的 store 模块实现数据共享、函数调用和计算属性的复用，避免了使用 Vuex 的复杂性。在 main.js 文件中，将 store 配置到 Vue 原型上，使得在组件中可以直接访问和修改数据。在组件模板中，展示了如何直接绑定 $store 数据和方法，以及响应式地更新视图。这种方法简化了状态管理，同时保持了数据的一致性。

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>