내가 사용하고vuex
과vuejs2
함께.
나는 새로운vuex
,나를 보고 싶은저장
변수를 변경합니다.
을 추가하고 싶은시
기능에vue 구성 요소
이것은 내가 지금까지:
import Vue from 'vue';
import {
MY_STATE,
} from './../../mutation-types';
export default {
[MY_STATE](state, token) {
state.my_state = token;
},
};
고 싶은 알고 있는 경우에 어떤 변화my_state
어떻게 시계의저장합니다.my_state
내 vuejs 구성 요소는?
Let's 말하는,예를 들어,당신은 과일 바구니 각 시간을 추가하거나 제거하는 과일 바구니에서,당신은 당신 고 싶(1)디스플레이 정보에 대한 열매 계산,하당신은 또한 당신(2)통보를 원하수의 과일에서 몇 가지 멋진 패션...
과산 구성 요소입니다.뷰
<template>
<!-- We meet our first objective (1) by simply -->
<!-- binding to the count property. -->
<p>Fruits: {{ count }}</p>
</template>
<script>
import basket from '../resources/fruit-basket'
export default () {
computed: {
count () {
return basket.state.fruits.length
// Or return basket.getters.fruitsCount
// (depends on your design decisions).
}
},
watch: {
count (newCount, oldCount) {
// Our fancy notification (2).
console.log(`We have ${newCount} fruits now, yaay!`)
}
}
}
</script>
는 것을주의하시기 바랍에서 함수 이름을시청
체의 이름과 일치해야 합니다 기능에계산
개체입니다. 위의 예에서 이름은횟수
.
새로운 오래된 값의 본산이 될 것으로 전달 watch 콜백(수능)매개 변수로 사용합니다.
바구니점은 다음과 같이 표시될 수 있습니다:
fruit-basket.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const basket = new Vuex.Store({
state: {
fruits: []
},
getters: {
fruitsCount (state) {
return state.fruits.length
}
}
// Obvously you would need some mutations and actions,
// but to make example cleaner I'll skip this part.
})
export default basket
자세한 내용을 읽을 수 있고 자료:
를 사용하지 않아야 합성's 전문가를 듣고 상태 변경. 나는 좋은 당신을 사용하여 필요한 것입 함수 및 다음도 그들 안에 당신의 구성 요소입니다.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters({
myState: 'getMyState'
})
}
}
에 저장소:
const getters = {
getMyState: state => state.my_state
}
할 수 있어야기를 듣고 모든 변경 사항은 당신의 상점을 사용하여이다.myState
에서 당신의 구성 요소입니다.
https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper
로 위에서 언급하지 않는 좋은 아이디어를 직접 변경에서 저장
그러나 매우 드문 경우에 유용할 수 있습니다 누군가를 위해,그래서 떠날 것이 대답합니다. 다른 사람을 위한 경우,참조하시기 바랍@가브리엘-로 대답
하여 이 작업을 수행할 수 있습니다상태입니다.$시계
. 추가 이에만든
(또는 곳에요 이 실행 될)방법에서 구성 요소
this.$store.watch(
function (state) {
return state.my_state;
},
function () {
//do something on data change
},
{
deep: true //add this if u need to watch object properties change etc.
}
);
이것은 모든 사람들을 위해 수 없는 자신의 문제를 해결로 얻어와 실제로 정말 필요한 감시자,예를 들어 얘기하는 비 vue 타사 재료(참조Vue 전문에 사용하는 경우가).
뷰 구성 요소는's 전문가 및 계산 값이 모두 작업에서 계산한 값입니다. 그래서 그's 과 다르지 않 vuex:
import { mapState } from 'vuex';
export default {
computed: {
...mapState(['somestate']),
someComputedLocalState() {
// is triggered whenever the store state changes
return this.somestate + ' works too';
}
},
watch: {
somestate(val, oldVal) {
// is triggered whenever the store state changes
console.log('do stuff', val, oldVal);
}
}
}
경's 만 결합에 관하여 지역 및 글로벌 상태,mapState's doc또한 제공합니다 예를 들어:
computed: {
...mapState({
// to access local state with `this`, a normal function must be used
countPlusLocalState (state) {
return state.count + this.localCount
}
}
})
을 만들현지 국상점의 변수에 의해 보고 및 설정 값을 변경합니다. 이 같은 지역 변수를 변경한식-입력 v 모델을 직접하지 않는 변형저장할 변수.
data() {
return {
localState: null
};
},
computed: {
...mapGetters({
computedGlobalStateVariable: 'state/globalStateVariable'
})
},
watch: {
computedGlobalStateVariable: 'setLocalState'
},
methods: {
setLocalState(value) {
this.localState = Object.assign({}, value);
}
}
를 볼 수있는 가장 좋은 방법 스토어 변경을 사용하는 것mapGetters
가브리엘로 말했습니다.
그러나는 경우가 있을 때할 수 있't 를 통해 그것을 할mapGetters
예를 들어 당신이 뭔가를 얻으려면서 저장소를 사용하여 매개변수:
getters: {
getTodoById: (state, getters) => (id) => {
return state.todos.find(todo => todo.id === id)
}
}
이 경우에는 수't사용 mapGetters
. 당신이 시도할 수 있습니다 뭔가를 다음과 같이 대신:
computed: {
todoById() {
return this.$store.getters.getTodoById(this.id)
}
}
그러나 불행하게도todoById
것입 업데이트하는 경우에만이다.id
가 변경
당신이 원하는 경우에 당신은 구성 요소를 업데이트 같은 경우에는 사용을이다.$저장소입니다.시계
솔루션을 제공하여 징. 또는 손잡이 당신의 구성요소 의식적으로 업데이트이다.id 와
업데이트할 필요가 있을 때todoById
.
당신의 조합을 사용할 수 있는 Vuex조치,필요한 것입,[속성을 계산](https://vuejs.org/v2/guide/computed.html 고)[전문가](https://vuejs.org/v2/guide/computed.html#Watchers 용)들어에서 변경 Vuex 상태 값입니다.
HTML 코드:
<div id="app" :style='style'>
<input v-model='computedColor' type="text" placeholder='Background Color'>
</div>
JavaScript 코드:
'use strict'
Vue.use(Vuex)
const { mapGetters, mapActions, Store } = Vuex
new Vue({
el: '#app',
store: new Store({
state: {
color: 'red'
},
getters: {
color({color}) {
return color
}
},
mutations: {
setColor(state, payload) {
state.color = payload
}
},
actions: {
setColor({commit}, payload) {
commit('setColor', payload)
}
}
}),
methods: {
...mapGetters([
'color'
]),
...mapActions([
'setColor'
])
},
computed: {
computedColor: {
set(value) {
this.setColor(value)
},
get() {
return this.color()
}
},
style() {
return `background-color: ${this.computedColor};`
}
},
watch: {
computedColor() {
console.log(`Watcher in use @${new Date().getTime()}`)
}
}
})
[보 JSFiddle demo](
).사용할 수도 있습니다 mapState 에서 당신의 vue 구성 요소를 직접 점점 국가에서 저장합니다.
에서 당신의 구성 요소:
computed: mapState([
'my_state'
])
는my_state
는 변수에 저장한다.
는 경우에 당신은 단순히 원하는watch**이 상태성**다음 내에서 행동 권한에 따라 변화의 특성은 다음 아래의 예를 참조하십시오.
에store.js
:
export const state = () => ({
isClosed: false
})
export const mutations = {
closeWindow(state, payload) {
state.isClosed = payload
}
}
이 시나리오에서 내가 만들기boolean
상태로는 시설 내가 변경 다른 장소에서 응용 프로그램에서처럼 그렇:
this.$store.commit('closeWindow', true)
지금,내가 조심해야 하는 상태 속에서 몇 가지 다른 구성요소를 변경한 지역산 쓰겠다고 다음에서거치
hook:
mounted() {
this.$store.watch(
state => state.isClosed,
(value) => {
if (value) { this.localProperty = 'edit' }
}
)
}
첫째,내가 설정 감시자는 상태에 속한 다음 콜백 함수에서 사용value
의 속성을 변경하는localProperty
.
I hope it helps!