[Vue.js] store 모드를 통해 간단한 상태 관리를 실현합니다.
개시하다
Vue.이것은 js 초보자가 쓴 기사다.
그래서 나무랄 데가 많을 것 같아서 교수님을 얻었으면 좋겠어요.
이 글은 Vue.상태 관리을 자신의 방식대로 씹어 정리한 것이다.
한편 이번에 쓴 코드는 GitHub에게 주었다.
store 모드를 통해 간단한 상태 관리를 실현합니다.
상태 관리
위 사이트 프로젝트 "0부터 간단한 상단 관리"에서 구성 요소 간의 공통 상태를 유지할 때
각 구성 요소나 하위 구성 요소this.$root.$data 등을 통해 이 상태를 접근하고 바꾸면 어디가 상태를 바꿨는지 파악하기 어려워지고 디버깅이 어려워진다.
이때 storeパターン를 이용하면 이 문제를 해결할 수 있다.
다음은 참고 사이트의 샘플 코드를 검증하기 위해 스스로 변경한 코드입니다.(복제품에 직접 사용할 수 있도록 모두 위에 올려놓았다.)<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vuex</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app1">
{{ this.$root.$data.sharedState }}
<button v-on:click="setMessageAction">setMessageAction</button>
<button v-on:click="clearMessageAction">clearMessageAction</button>
</div>
<div id="app2">
{{ this.$root.$data.sharedState }}
<button v-on:click="setMessageAction">setMessageAction</button>
<button v-on:click="clearMessageAction">clearMessageAction</button>
</div>
<script>
/* storeパターン
状態管理を中央集権的にすることで、
どういった種類の状態変化が起こりうるか、
あるいはそれがどうやってトリガされているか、
が分かりやすくなる.
*/
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction(newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction() {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
const vmA = new Vue({
el: app1,
data: {
sharedState: store.state
},
methods: {
setMessageAction: function () {
store.setMessageAction('newValue from app1')
},
clearMessageAction: function () {
store.clearMessageAction()
}
}
})
const vmB = new Vue({
el: app2,
data: {
sharedState: store.state
},
methods: {
setMessageAction: function () {
store.setMessageAction('newValue from app2')
},
clearMessageAction: function () {
store.clearMessageAction()
}
}
})
</script>
<style>
</style>
</body>
</html>
여기서 가장 중요한 것은 컨디션을 바꾸는 동작은 모두 스토어가 스스로 가지고 있다는 것이다.
다음은 참고 사이트
이렇게 상태 관리를 중앙 집권으로 만들면 어떤 상태 변화가 일어날까
그게 어떻게 촉발되었는지 알기 쉽다.
이렇게 되면 어떤 안 좋은 일이 있어도 오류가 발생할 때까지 일지를 볼 수 있다.
총결산
구성 요소는 store의 상태를 직접 바꾸지 않습니다
대신 store에 정의된 동작을 호출 상태로 변경합니다.
끝까지 읽어주셔서 감사합니다.
Reference
이 문제에 관하여([Vue.js] store 모드를 통해 간단한 상태 관리를 실현합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/residenti/items/550589313cfef43062c3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
상태 관리
위 사이트 프로젝트 "0부터 간단한 상단 관리"에서 구성 요소 간의 공통 상태를 유지할 때
각 구성 요소나 하위 구성 요소
this.$root.$data 등을 통해 이 상태를 접근하고 바꾸면 어디가 상태를 바꿨는지 파악하기 어려워지고 디버깅이 어려워진다.이때
storeパターン를 이용하면 이 문제를 해결할 수 있다.다음은 참고 사이트의 샘플 코드를 검증하기 위해 스스로 변경한 코드입니다.(복제품에 직접 사용할 수 있도록 모두 위에 올려놓았다.)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vuex</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app1">
{{ this.$root.$data.sharedState }}
<button v-on:click="setMessageAction">setMessageAction</button>
<button v-on:click="clearMessageAction">clearMessageAction</button>
</div>
<div id="app2">
{{ this.$root.$data.sharedState }}
<button v-on:click="setMessageAction">setMessageAction</button>
<button v-on:click="clearMessageAction">clearMessageAction</button>
</div>
<script>
/* storeパターン
状態管理を中央集権的にすることで、
どういった種類の状態変化が起こりうるか、
あるいはそれがどうやってトリガされているか、
が分かりやすくなる.
*/
var store = {
debug: true,
state: {
message: 'Hello!'
},
setMessageAction(newValue) {
if (this.debug) console.log('setMessageAction triggered with', newValue)
this.state.message = newValue
},
clearMessageAction() {
if (this.debug) console.log('clearMessageAction triggered')
this.state.message = ''
}
}
const vmA = new Vue({
el: app1,
data: {
sharedState: store.state
},
methods: {
setMessageAction: function () {
store.setMessageAction('newValue from app1')
},
clearMessageAction: function () {
store.clearMessageAction()
}
}
})
const vmB = new Vue({
el: app2,
data: {
sharedState: store.state
},
methods: {
setMessageAction: function () {
store.setMessageAction('newValue from app2')
},
clearMessageAction: function () {
store.clearMessageAction()
}
}
})
</script>
<style>
</style>
</body>
</html>
다음은 참고 사이트
이렇게 상태 관리를 중앙 집권으로 만들면 어떤 상태 변화가 일어날까
그게 어떻게 촉발되었는지 알기 쉽다.
이렇게 되면 어떤 안 좋은 일이 있어도 오류가 발생할 때까지 일지를 볼 수 있다.
총결산
구성 요소는 store의 상태를 직접 바꾸지 않습니다
대신 store에 정의된 동작을 호출 상태로 변경합니다.
끝까지 읽어주셔서 감사합니다.
Reference
이 문제에 관하여([Vue.js] store 모드를 통해 간단한 상태 관리를 실현합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/residenti/items/550589313cfef43062c3
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([Vue.js] store 모드를 통해 간단한 상태 관리를 실현합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/residenti/items/550589313cfef43062c3텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
