Как передать значения магазина в компоненты - PullRequest
Новая
       7

Как передать значения магазина в компоненты

0 голосов
/ 14 января 2019

Я хочу передать значения в store.state в компонентах и ​​получил ошибку: [Vue warn]: Error in render: "TypeError: Cannot read property 'state' of undefined"

Итак, я вызвал значение в компоненте напрямую, и оно не работает. 

const store = new Vuex.Store({
	state: {
    filter: {
      selected: false,
      value: 'test'
    }
  },
});

new Vue({
	el: '#app',
	template: `<div id="app"><div :selected="this.$store.state.filter.selected">Option</div></div>`
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@3.0.1/dist/vuex.js"></script>
<div id="app"></div>

Вью 

const store = new Vuex.Store({
    state: {
            filter: {
                value: 'test',
                selected: true
            }
        },
    mutations: {},
    actions: {},
    getters: {}
});

HTML 

<option :selected="store.state.filter.selected">{{store.state.filter.value}}</option>

Могу ли я использовать это таким образом, или мне нужно думать по-другому и как? Спасибо.

Мое текущее решение - сохранить значение в вычисляемых переменных, но есть ли способ передать значения хранилища Vuex непосредственно в компонент? 

computed: {
    filter () {
        return storeLogs.state.filter;
    }
}

<option :selected="filter.selected">{{filter.value}}</option>

1 Ответ

0 голосов
/ 17 января 2019

Две вещи:

  1. Вы должны передать ваш store объект конструктору Vue
  2. Нет необходимости ссылаться на "это" в вашем шаблоне 
const store = new Vuex.Store({
    state: {
      filter: {
        selected: false,
        value: 'test'
      }
    },
});

new Vue({
    store, // add store object to Vue
    el: '#app',
    template: `<div id="app"><div selected="$store.state.filter.selected">Option</div></div>`
});

Вы также можете использовать mapState в вашем .vue файле: 

<!-- MyComponent.vue -->
<template>
  <option :selected="filter.selected">{{filter.value}}</option>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name : 'MyComponent',
  computed() {
    ...mapState(['filter'])
  }
}
</script>
...