Состояние настройки Vuex

Question

У меня есть опора, которую я привязываю к дочернему компоненту. Я пытаюсь избавиться от этого и установить значение для данных в глобальном состоянии vuex.

<VideoPip :asset="asset" v-show="pipEnabled === true" />

Как я могу установить this. $ Store.state.assetVideo; который по умолчанию является пустым объектом, равным стоимости актива? Мог бы я сделать это в вычисляемом свойстве?

Answer 1

в родительском компоненте:

// if you dont use namespace
import { mapMutations, mapState } from 'vuex'

export default {
  computed: {
    ...mapState(['assetVideo']),
    asset: {
      get() {
        return this.assetVideo
      },
      set(newValue) {
        this.setAssetVideo(newValue)
      }
    }
  },
  methods: {
    ...mapMutations(['setAssetVideo']),
  }
}

store

const store = {
  state: {
    assetVideo: {}
  },
  mutations: {
    setAssetVideo(state, payload) {
      state.assetVideo = payload
    }
  }
}

в родительском компоненте вы можете изменить состояние, используя this.asset = 'something', и оно изменится в магазине и в любом другом месте

, а также вы можете передать его дочерним компонентам

Answer 2

Для чтения данных состояния видео вы можете просто использовать mapState помощник . Например, в вашем Video компоненте

import { mapState } from 'vuex'

export default {
  name: 'Video',
  computed: mapState(['assetVideo'])
}

вы можете ссылаться на this.assetVideo в методах вашего компонента и assetVideo в его шаблоне. Это будет реагировать на изменения в магазине.

Для установки значения вы должны (должны) использовать мутацию. Например

const store = new Vuex.Store({
  strict: true, // always a good idea
  state: {
    assetVideo: {} // personally, I'd default to "null" but that's up to you
  },
  mutations: {
    setVideoAsset: (state, assetVideo) => (state.assetVideo = assetVideo)
  }
}

и в ваших компонентах

methods: {
  selectVideo (video) {
    this.$store.commit('setVideoAsset', video)
  }
}