Vuexとbootstrap-vueを組み合わせた実装

忘れ内容にメモ

store作成

まず、Vuexでstoreを作成

store/sample.ts

export const state = () => ({
  id: '',
  name: ''
})

export State = {
  id: string
  name: string
}

export const mutations = {
  changeId(state: State, value: string) {
    state.id = value
  },
  changeName(state: State, value: string) {
    state.name = value
  },
}

computedでgetterとsetter

index.vue

  computed: {
    id: {
      get () {
        return this.$store.state.sample.id
      },
      set (val) {
        this.id(val)
      }
    },
    name: {
      get () {
        return this.$store.state.sample.name
      },
      set (val) {
        this.name(val)
      }
    }

computedで定義したものを後は b-form-input などのmodelに渡すだけ

vee-validateなどを使用した場合(pug)

validation-observer(ref="observer" v-slot="{ handleSubmit, invalid }")
  b-form(@submit.prevent="handleSubmit(onSubmit)")
    validation-provider(
      name="id"
      v-slot="{ errors, valid, validated }"
    )
      b-form-input(
        v-model="id"
        :state="validated ? valid : null"
      )
      b-form-invalid-feedback {{ errors[0] }}