Vuex 저장소로 UI 요소 바인딩

Vuex 저장소로 UI 요소 바인딩

UI 요소(단일 줄 텍스트 상자 또는 '입력' 요소)를 Vuex 저장소와 바인딩하려고 합니다.이 바이올린은 코드를 가지고 있습니다.

그 때.SearchResult구성 요소가 표시되고 자동 업데이트됩니다. 아래의 GIF를 참조하십시오.Lisp또는Prolog입력되었습니다.저는 그런 일이 일어나기를 원하지 않습니다.제가 정말 하고 싶은 것은 UI 상태(즉, 텍스트 상자의 값)를 모델의 상태에서 분리하여 입력하는 것입니다.Lisp검색을 누릅니다.SearchResult구성 요소 업데이트 자체.

이상적으로는 텍스트 상자를 스토어에 없는 변수로 바인딩하는 동시에 스토어의 변경 사항을 관찰할 수 있는 코드를 추가하여 스토어의 변경 사항이 UI에 반영되도록 하고 싶습니다.

Vuex에 대한 문서를 다루는 양식을 읽었지만 이 작업을 수행하는 가장 좋은 방법에 대해서는 잘 알지 못했습니다.누구 좀 도와주시겠어요?저는 SPA가 처음이라 더 나은 방법이 있을 거라고 확신합니다.

스토어 변수를 사용하려면 사용한 접근 방식이 일반적인 접근 방식이라고 생각합니다.inputUI 변수를 모델의 상태(Why?)와 분리하려는 경우 다음 작업을 수행할 수 있습니다.

1. 해당 인스턴스의 해당 값에 로컬 변수가 있어야 합니다.
2. v-model에 해당 로컬 변수 사용
3. watch on state variable을 설정합니다. 상태 변수가 변경되면 로컬 변수를 변경합니다.
4. 버튼을 누르거나 다른 방법으로 상태 변수를 설정합니다.onblur이벤트

다음은 관련된 JS 변경 사항입니다.

const app = new Vue({
    router,
    el: '#app',
    data: {
      localQuery: ''
    },
    computed: {
        query: {
            get () { return store.state.query },
            set (v) { store.commit('setquery', v) }
        }
    },
    methods: {
        s1: function () {
            console.log('app.s1 this.query: ' + this.query);
            this.query = this.localQuery
            router.push({ name: 'qpath', params: { query: this.query }});
        }
    },
    watch:{
       query: function (newVal) {
                    this.localQuery = newVal
       }
    }
})

여기에서 업데이트된 피들을 참조하십시오.

언급URL : https://stackoverflow.com/questions/41346156/binding-a-ui-element-with-a-vuex-store