vue computed计算属性显示undefined的解决

computed:{
    ...mapState({
      categoryList:(state)=>{
        // console.log(state.home.categoryList)
        state.home.categoryList
      }
    })
  }

computed:{
    ...mapState({
      //state的括号可以去掉，函数的大括号可以去掉
      categoryList:(state)=>{
        // console.log(state.home.categoryList);
        return state.home.categoryList;
      }
    })
  }

<template>
  <section>
    <input type="button" value="查看三个list的值" @click="lookOneLook" />
    <div>
      list1：
      <span v-for="(o, index) in list1" :key="'list1' + index">
        {{ o }}
      </span>
    </div>
    <div>
      list2：
      <span v-for="(o, index) in list2" :key="'list2' + index">
        {{ o }}
      </span>
      <input type="button" value="向list2中push" @click="list2.push(5)" />
    </div>
    <div>
      list3：
      <span v-for="(o, index) in list3" :key="'list3' + index">
        {{ o }}
      </span>
      <input type="button" value="向list3中push" @click="list3.push(6)" />
    </div>
  </section>
</template>

<script>
export default {
  computed: {
    list2: {
      get() {
        return this.list1;
      },
      set(val) {
        alert("触发list2的setter");
        this.list1 = val;
      },
    },
    list3: {
      get() {
        return this.list1.map((o) => o);
      },
      set(val) {
        alert("触发list3的setter");
        this.list1 = val;
      },
    },
  },
  data() {
    return {
      list1: [1, 2, 3, 4],
    };
  },
  methods: {
    lookOneLook() {
      alert(`
      list1 : ${this.list1}
      list2 : ${this.list2}
      list3 : ${this.list3}`);
    },
  },
};
</script>

computed:{
	options:{			
		// 写法一：test() 有效，是因为 this.options 和 this.userObj.options 是相同引用
		return this.userObj.options;
		/** 写法二：test() 无效
		return {
			name :this.userObj.options.name
		};*/
	}
}
methods:{
	test(){			
		this.options.name='1';	
	}
}```