Блог

Мне не нужно передавать данные между родительским компонентом дочернему или наоборот, мне нужно что-то вроде статических переменных php/c.

Я хочу, чтобы мой sfc (компонент с одним файлом) содержал некоторые данные, которые являются общими для всех экземпляров на странице.

Насколько я понимаю, именно поэтому в sfc мы определяем data как функцию

 export default {
    data(){
        return {
            // props here
        };
    }
}
 

в то время как в скриптах страниц мы можем определить его как объект

 const app = new Vue({
    data: {
        // props here
    },
}
 

Это связано с тем , что, поскольку у нас может быть несколько экземпляров sfc на странице, определяющих его данные как функцию, каждый экземпляр должен выполняться и получать свой собственный data , в то время как со сценарием страницы у нас может быть экземпляр singe.

Мне нужно определить некоторые из моих данных sfc, которые будут использоваться совместно экземплярами компонентов, в то время как другие данные должны быть для каждого экземпляра.

Есть ли способ сделать это?

Это зависит от определяемых данных, их сложности и назначения.

Если это 2 или 3 переменные только для чтения, их можно задать в качестве глобальных свойств с помощью Vue.prototype (Vue 2) или app.config.globalProperties (Vue 3). Я не уверен, потому что в вашем примере вы используете синтаксис Vue 2.

Если данные должны быть реактивными, вы можете настроить простое управление состоянием, как описано в документации Vue: Простое управление состоянием.

Если данные более сложны, чем это, следующим шагом будет Vuex.

Следуя ответу @Igor, я изучил простое управление состоянием и нашел метод ref (), который создает реактивные примитивные значения.

В моем конкретном случае использования мне нужно было разделить между всеми экземплярами sfc только массив, поэтому в моем sfc у меня был:

 const reactive_array = ref([]);

export default {
    data() {
        return {
            shared_array: reactive_array,
        };
    },
};