vuex 修改name时，list数组也被修改了

Question

<template>
  <div>
    Getter Demo
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <button @click="changeList()">changeList</button>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from "vuex";
export default {
  name: "getter-demo",
  computed: {
    ...mapGetters(["list", "name"]),
  },
  methods: {
    ...mapMutations(["setList", "setName"]),
    changeList() {
      this.list.push({ type: "custom" });
      this.setName("lisi");
    }
  },
};
</script>

<style lang="scss" scoped>
</style>

import { createStore } from "vuex";

export default createStore({
  state: {
    list: [
      { type: "brand" },
      { type: "img" },
      { type: "goodsWeek" },
      { type: "imageTextList" },
    ],
    name: "zhangsan",
  },
  getters: {
    list: (state) => state.list,
    name: (state) => state.name,
  },
  mutations: {
    setList(state, list) {
      state.list = list;
    },
    setName(state, name) {
      state.name = name;
    },
  },
  actions: {},
  modules: {},
});

当我修改 name 值并保存到 vuex 时，为什么 list 修改值在 vuex 中也被修改了?
我并没有调用 setList 方法

Answer 1

this.list.push({ type: "custom" });这行代码改的，你改变了引用值