将公共数据挂在 Vue 原型上（简单、适合 CDN）

Qlittleboy2026-04-03 10:13

在common.js里获取共同的数据后，统一挂载到vue原型上，不用每个页面都调用

Vue.observable 让对象变成响应式，一处修改，所有用到的地方自动更新。

无需混入 data，避免了数据副本问题。

Vue.observable([]) 的作用是将一个普通对象（或数组）转化为响应式对象。

Vue.observable({ name: '', age: 0 }) 括号里面的就是初始值

javascript 复制代码

// 在 common.js 中，new Vue 之前
const store = {
    paylist: Vue.observable([]),   // 创建响应式对象
    memberlevel: Vue.observable({ name: '', age: 0 }),
    // ... 其他数据
};

// 挂载到 Vue 原型，所有组件通过 this.$store.xxx 访问
Vue.prototype.$store = store;

// 在根组件中更新数据
getindexdatas() {
    $.ajax({
        success: (res) => {
            this.$store.paylist = res.data.paylist;   // 更新共享数据
        }
    })
}

// 在任何组件中读取
console.log(this.$store.paylist);

或者直接写变量，不用中间的$store 变量

javascript 复制代码

// 在 common.js 中，new Vue 之前

// 挂载到 Vue 原型，所有组件通过 this.$store.xxx 访问
Vue.prototype.paylist = Vue.observable([])   // 创建响应式对象
Vue.prototype.memberlevel= Vue.observable({ name: '', age: 0 })   // 创建响应式对象
// ... 其他数据

// 在根组件中更新数据
getindexdatas() {
    $.ajax({
        success: (res) => {
            this.paylist = res.data.paylist;   // 更新共享数据
        }
    })
}

// 在任何组件中读取
console.log(this.paylist);

免费在线工具网站 https://mantools.top