다음 간단한 코드는 일부 구성 요소와 루트 인스턴스가 vuex 개체에서 바인딩하는 대신 콘솔에 오류를 기록하기 때문에 많은 골칫거리가되었습니다. 여기서 무엇을 놓칠 수 있습니까?
var state = {
counter: 0
};
var mutations = {};
var store = new Vuex.Store({state, mutations});
var someComponent = Vue.extend({
template: '<div>{{counter}}</div>',
//data: function(){return {counter: 0}},
vuex: {
getters: {
counter: getCounter
}
}
});
new Vue({
el: '#app',
components: {
'some-component': someComponent
},
store: store,
vuex: {
getters: {
counter: getCounter
}
}
});
function getCounter(state) {
return state.counter;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>vue-bug</title>
</head>
<body>
<div id="app">
<span>{{counter}}</span>
<some-component></some-component>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.0-rc.1/vue.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.0.0-rc.1/vuex.js"></script>
</body>
</html>내 코드에서는 Vue.use (Vuex)를 호출하고 있지만이 바이올린에서는 그럴 필요가 없습니다 (Vuex가 이미 등록되어 있다고 말합니다). 또한 데이터가있는 줄의 주석 처리를 제거하면 구성 요소가 제대로 렌더링됩니다.
어떤 도움이라도 대단히 감사합니다.
Vue / Vuex 2.0을 사용하는 경우이 링크 를 확인해야 합니다 . vuex 2.0에서는 vuex게터와 액션을 설정하기 위해 컴포넌트 내부 에 속성을 생성하지 않습니다 . 대신 store.js파일에서 다음과 같이 상태에서 소품을 가져 와서 저장소에 주입 할 getters 객체를 정의합니다.
const state = {
counter: 0
}
const getters = {
getCounter: state.counter
}
const actions = {}
const mutations = {}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
구성 요소에서 다음과 같이 계산 된 속성을 사용하여 게터를 정의 할 수 있습니다.
import { mapGetter, mapActions } from 'vuex'
export default {
template: '#some-template',
computed: {
yourFirstComputed() {},
anotherOfYourComputed() {},
...mapGetters({
getCounter: 'getCounter'
})
},
methods: {
yourMethod(){},
...mapActions({
anyOfYourActions: 'anyOfYourActions'
})
}
}
그런 다음 일반 계산에서와 같이 이러한 소품을 호출 할 수 있습니다. 반복합니다, 이것은 질문에 대한 의견을 읽은 후 사용하고 있다고 생각하는 vuex 2에 적용됩니다.
도움이 되었기를 바랍니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다