Как я могу получить значение из хранилища vuex с помощью Mapstate?

ProgramBox

Как я могу получить значение из хранилища vuex с помощью Mapstate?

Post author:admin
Запись опубликована:13 июля, 2022
Post category:Вопросы по программированию

#vue.js #vuex

Вопрос:

Внезапно мне не удается получить значение из хранилища vuex. отсутствует что-то тривиальное, но не вижу, что (я новичок 🙁 )

В моем компоненте я импортирую mapstate:

 <script>
import { mapState, mapActions } from 'vuex';

export default {
    mounted(){
        console.log('component mounted');
        
    },
    computed: {
        ...mapState([
        'currentSpeler' ,'currentSpelerCard', 'currentGame'
        ]), 
    },

На панели Vue консоли Chrome я вижу, что значение currentGame существует.

Я могу заставить свой скрипт работать, когда я использую:

 console.log("currentGame.id ="  this.$store.state.currentGame.id);

но когда я использую:

 console.log("currentGame.id ="  this.currentGame.id);

Я получаю сообщение об ошибке:

 Cannot read properties of undefined (reading 'id')

Кто-нибудь видит, чего мне не хватает?

1. Убедитесь, что вы инициализировали currentGame внутренние состояния значением по умолчанию!

2. Попробовал… К сожалению, это не помогло… Но поскольку this.$store.state.currentGame я уже работал, я действительно не ожидал, что это будет решением..

3. Пожалуйста, укажите путь к каталогу, в который вы поместили этот компонент

4. resources/js/store/state.js компонент resources/js/components/MemoryGame.vue

Ответ №1:

Согласно документам Vuex, помощник mapState возвращает объект по умолчанию.

Вы импортируете свои состояния в массив. Вы можете использовать object вместо array.

 computed: {
        ...mapState({
        currentSpeler: state => state. currentSpeler,
        currentSpelerCard: state => state.currentSpelerCard, 
        currentGame: state => state.currentGame
        }), 
    },

1. К сожалению, это не работает. В другом компоненте я без проблем использовал обозначение массива: вычисленный { …mapState([ ‘cards’ ]) },

2. можете ли вы поделиться своими файлами хранилища

3. Это state.js : export default{ cards:[], games:[], token:localStorage.getItem('access_token') || null, currentGame:{}, currentSpeler:{}, currentSpelerCard:{}, } но в другом компоненте, который я использую computed: { ...mapState([ 'currentSpeler' ,'currentSpelerCard', 'currentGame' ]), }, , и он работает как шарм. Также this.$store.state.currentGame.id работает нормально. Поэтому я не думаю, что что-то не так с состоянием… Возможно, я забыл что-то тривиальное..

Ответ №2:

Я бы попытался записать в консоль текущую игру и посмотреть, как она выглядит, тогда вы можете двигаться дальше. Я предполагаю, что вы каким-то образом инициализируете параметр id currentGame при использовании другого компонента.

1. Спасибо за проявленный интерес к этому вопросу. Я попытался записать в консоль саму текущую игру: она также не определена… Консоль говорит: currentGame.id =undefined также, когда я прошу зарегистрировать другой объект, который доступен в хранилище (проверено в консоли Chrome, с помощью плагина Vue, отображаются все объекты хранилища …) Похоже, что mapState не работает в этом конкретном объекте Memory.vue. Инициализация точно такая же, как и у других компонентов…..

2. да, если вы разместите репозиторий где-нибудь, я могу взглянуть на него, но без него я действительно не знаю, что еще может быть не так в этом банкомате. также попробуйте получить его из родительского компонента, возможно, в качестве реквизита .. или idk. извините.

3. Спасибо, что подумали вместе. Только что обнаружил свою глупую ошибку… (ах ..) У меня был второй экземпляр Computed: { …}, определенный в нижней части моего скрипта…. Итак, объявление computed: было перезаписано… Обнаружил ошибку, когда решил скопировать компонент по частям..

4. да, был там :]

Ответ №3:

Найдена ошибка…

Я дважды объявил computed: { …} .

 computed: {
       ...mapState([
       'currentSpeler' ,'currentSpelerCard', 'currentGame',
       ]), 
 },

в начале моего скрипта … и

 computed: {
     
       sec(){
           if(this.totalTime.seconds < 10){
               return '0' this.totalTime.seconds;
           }
           return this.totalTime.seconds;
       },
       min(){
           if(this.totalTime.minutes < 10){
               return '0' this.totalTime.minutes;
           }
           return this.totalTime.minutes;
       }
   },

логика memorygame в конце моего скрипта … перезаписывает mapState…

Очень глупо … * ударяется головой о стол *

Метки: Как я могу получить значение из магазина vuex с помощью Mapstate?