配列のvuex state値を変更するとなぜかすべての配列が更新されてしまう

配列のvuex state値を変更するとなぜかすべての配列に対して値が変更されます。

例えば以下のような値で1番目配列のtypeを変更するため

js
1questions: [ {type: ''},{type: ''}]

js
1state.questions[1].type = 1

すると

なぜか

js
1questions: [ {type: ''},{type: 1}]

こうならずに以下のようになってしまいます。

js
1questions: [ {type: 1},{type: 1}]

=============

コードは以下に貼り付けます。
何か間違ってる部分がありましたらご指摘いただけますでしょうか。
(mutationのupdateQuestionTypeを実行する際、発生します。)

parent.vue

js
1<template>
2div(v-for="(q, id) in getQuestion")
3  question(:questionId="id")
4</template>

child.vue

js
1<template
2  select(@change="changeSelectType")
3    option(value=1) type1
4    option(value=2) type2
5    option(value=3) type3
6</template>
7<script>
8export default Vue.extend({
9  props: {
10    questionId: Number
11  },
12  data() {
13    return {
14      qId: this.questionId,
15    };
16  },
17methods:{ 
18    changeSelectType(v) {
19      this.$store.commit("item/updateQuestionType", {
20        questionType: this.questionType,
21        qId: this.qId
22      });
23    }
24}
25</script>

mutations

js
1  updateQuestionType(state, { questionType, qId }) {
2    state.questions[qId].type = questionType;
3  },

mutations(item module)

js
1  addQuestion: (state, question: QuestionState) => {
2    state.questions.push(question);
3    console.log("addQuestion state.questions", state.questions);
4  },

state(item module)

js
1const state: ItemState = {
2  video_id: "",
3  where: "",
4  questions: []
5};

question追加時のロジック

js
1const question = this.$store.getters["question/getQuestion"];
2this.$store.commit("item/addQuestion", question);
3// this.$store.commit("item/addQuestion", { type: 1 }); <<だとうまく動きました。

よろしくおねがいします。

mcho71

2020/08/06 00:43 編集

state.questionsに値(question)を追加している箇所を貼ってみてもらっても良いですか？

Kimsehwa

2020/08/06 07:50 編集

ありがとうございます。こちらヒントとなり原因が特定できました。 questionというstore moduleを作って state.questions[0] = question のようなやり方でしたが、 state.questions[0] = {type: 1} のようにしたら正常に動きました。 ```js this.$store.commit("item/addQuestion", question); << 失敗 this.$store.commit("item/addQuestion", { type: 1 }); << 成功 ```

Kimsehwa

2020/08/06 07:50

rootState.question.type = 2 state.questions[0] = rootState.question みたいなロジックだと 0だけ変わると勝手に想定しましたが、 state.questions[0] state.questions[1] state.questions[2] が全部変更されるんですね

mcho71

2020/08/06 08:21

解決されたようでよかったです、値型と参照型の違いですね。