Vue.js/Vuex: 상태 값으로 v-bind하는 방법

Vue.js/Vuex: 상태 값으로 v-bind하는 방법

b-dropdown 요소의 텍스트를 스토어 값에 바인드하려고 합니다.스토어의 값이 변경될 수 있고 b-dropdown의 텍스트가 동적으로 변경되어야 하기 때문에 계산된 속성에 바인딩을 시도했습니다.값은 b-dropdown이 존재하는 컴포넌트 외부에서 유지되어야 하므로 데이터 객체가 아닌 스토어에 저장해야 합니다.

다음은 b-dropdropdown 요소는 다음과 같습니다.

<b-dropdown v-bind:text="selectedSearchType" variant="outline-secondary">
  ...
</b-dropdown>

그리고 계산된 속성은

computed: {
  selectedSearchType: function() {
    return store.getters.getSelectedSearchType
  }
},

더 게터

getSelectedSearchType: state => {
  return state.selectedSearchType
}

주(state)

state: {
 selectedSearchType: "Item",
 .....
}

다음의 에러가 표시됩니다.

[Vue warn]: Invalid prop: type check failed for prop "text". Expected String, got Function.

대신 내가 한다면

<b-dropdown v-bind:text="selectedSearchType()" variant="outline-secondary">

나는 이해한다

[Vue warn]: Error in render: "TypeError: Cannot read property 'selectedSearchType' of undefined"

b-dropdown의 텍스트를 스토어 내의 selectedSearchType에 바인드하려면 어떻게 해야 합니까?

저장소에 바인딩하는 가장 좋은 방법은 계산된 getter/setter를 생성한 다음 입력에 v-model을 사용하는 것입니다.그것은 다음과 같이 보일 것이다, 당신은 자신의 가치에 따라 조금 조정해야 할 것이다.

또, 다음과 같은 것을 전제로 하고 있습니다.b-dropdown값이 변경되면 입력이 방출됩니다.

<b-dropdown v-model="selectedSearchType" variant="outline-secondary">

computed: {
  selectedSearchType: {
    get() { 
      return //value from store 
    },
    set(val) {
      // set the value in the store
    }
  }
}

언급URL : https://stackoverflow.com/questions/53432436/vue-js-vuex-how-do-i-v-bind-to-a-state-value