아래 블로그에 작성된 내용을 옮김
https://rutgo-letsgo.tistory.com/286
<template>
<div class="hello">
<button @click="action.addItem">addItem</button>
<button @click="action.deleteItem">deleteItem</button>
<button @click="action.updateFirstItem">updateFirstItem</button>
<div class="list_box">
<div>Div</div>
<div v-for="item in arr" :key="item">
{{ item }}
{{ new Date() }}
</div>
</div>
<div class="list_box">
<div>ItemNumber Component</div>
<item-number v-for="item in arr" :key="item" :value="item"></item-number>
</div>
</div>
</template>
import { defineComponent, reactive, toRefs } from "vue";
import ItemNumber from "@/components/ItemNumber.vue";
export default defineComponent({
name: "HelloWorld",
components: { ItemNumber },
props: {
msg: String,
},
setup() {
const state = reactive({
arr: [1, 2, 3],
});
const action = {
addItem() {
const { length } = state.arr;
state.arr.push(length);
},
deleteItem() {
state.arr.splice(0, 1);
},
updateFirstItem() {
state.arr[0] = 500;
},
};
return {
...toRefs(state),
action,
};
},
});
.list_box {
padding: 20px;
}
<!-- ItemNumber.vue -->
<template>
<div>{{ value }} {{ new Date() }} {{ userStatus }}</div>
</template>
<script>
export default {
name: "ItemNumber",
props: {
value: Number,
userStatus: String,
},
};
</script>
<!-- ItemNumber.vue -->
<template>
<div>{{ value }} {{ new Date() }} {{ status }}</div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
export default {
name: "ItemNumber",
props: {
value: Number,
},
setup() {
const store = useStore();
const status = computed(() => store.state.user.status);
return { status };
},
};
</script>
<!-- HelloWorld.vue -->
<script>
export default {
// ... 생략
setup() {
const action = {
// ... 생략
updateUser() {
// user 값 업데이트
store.commit("setUser", {
status: "fail",
});
}
}
return { status };
},
};
</script>
// store/index.ts
import { createStore } from "vuex";
export default createStore({
state: {
user: {
status: "success",
},
},
getters: {},
mutations: {
setUser(state, value) {
state.user = value;
},
},
actions: {},
modules: {},
});
<!-- HelloWorld.vue -->
<template>
<!-- 생략.. -->
<!-- user-status props 추가 -->
<item-number
v-for="item in arr"
:key="item"
:value="item"
:user-status="userStatus"
></item-number>
<!-- 생략.. -->
</template>
<script lang="ts">
export default defineComponent({
name: "HelloWorld",
components: { ItemNumber },
props: {
msg: String,
},
setup() {
// .. 생략
// 추가
const userStatus = computed(() => store.state.user.status);
return {
...toRefs(state),
userStatus, // 추가
action,
};
},
</script>
<!-- ItemNumber.vue -->
<template>
<div>{{ value }} {{ new Date() }} {{ userStatus }}</div>
</template>
<script>
export default {
name: "ItemNumber",
props: {
value: Number,
userStatus: String, // props 이용하여 출력하도록 수정
},
};
</script>
<template>
<div class="hello">
<button @click="action.addItem">addItem</button>
<button @click="action.updateUser">updateUser</button>
<div class="list_box">
<div>ItemNumber Component</div>
<item-number
v-once
v-for="item in arr"
:key="item"
:value="item"
:user-status="userStatus"
></item-number>
</div>
</div>
</template>