vue 为每个组件创建不可观察的变量答案

【问题标题】：vue create non observable variables per componentvue 为每个组件创建不可观察的变量
【发布时间】：2021-05-05 00:02:04
【问题描述】：

我有单个文件组件。我需要创建类似于“数据”但非反应性 PER 组件的变量（不在相同组件之间共享）。在 vue 中怎么做？

// my-component.vue
    export default {
        data() {
            return {
                reative: 1
            };
        },
        // psevdocode 
        myNonObservableVariables(){
            return {
                simpleField: 3
            }
        },
        methods: {
            method1() {
                // can set
                this.simpleField = 5;
            }
            method2() {
               // can get
               console.log(this.simpleField);
            }
        }

更新 1：示例我创建 2 个组件并将随机值分配给“simpleField”并登录到控制台，我需要：

<my-component></<my-component> // console.log -> 555
<my-component></<my-component> // console.log -> 666

在分配新值 = 999 的第一个组件调用方法之后，在此之后：

<my-component></<my-component> // console.log -> 999
<my-component></<my-component> // console.log -> 666

【问题讨论】：

这能回答你的问题吗？ How could I use const in vue template?
@Terry 如果使用数据：{ CREATE_ACTION: CREATE_ACTION } 将在组件之间共享
我觉得你没有正确理解组件是如何实例化的。您能否添加有关如何声明组件的信息？
@Nicolas 添加更新 1

标签： vue.js vuejs2 vue-component

【解决方案1】：

您可以在created 上的this 中定义此类变量的自定义映射，如下所示：

const childcomponent = Vue.component('childcomponent', {
  template: '#childcomponent',
  props: ['id'],
  created() { this.myNonObservableVariables = { simpleField: 3 } },
  mounted() {
    let simpleField = this.getNonObservableVariable('simpleField');
    console.log('Before: simpleField', simpleField);
    this.setNonObservableVariable('simpleField', this.id);
    simpleField = this.getNonObservableVariable('simpleField');
    console.log('After: simpleField', simpleField);
  },
  methods: {
    setNonObservableVariable(key, value) {
      this.myNonObservableVariables[key] = value; 
    },
    getNonObservableVariable(key) { 
      return this.myNonObservableVariables[key]; 
    }
  }
});

new Vue({
  el:"#app",
  components: { childcomponent },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<template id="childcomponent"><div><div></template>

<div id="app">
  <div><childcomponent :id="1"/></div>
  <div><childcomponent :id="2"/></div>
</div>

【讨论】：