Как получить доступ к значениям магазина для компонентов в vue js - PullRequest
Новая
       7

Как получить доступ к значениям магазина для компонентов в vue js

0 голосов
/ 29 августа 2018

Это мой store.js 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isLoggedIn: !!localStorage.getItem('token'),
        isLog : !!localStorage.getItem('situation')
    },
    mutations: {
        loginUser (state) {
            state.isLoggedIn = true
            state.isLog = true
        },
        logoutUser (state) {
            state.isLoggedIn = false
            state.isLog = false
        },
    }
})

но когда я вызываю {{state.isLoggedIn}} в display.vue, я не получаю значения.

В display.vue я использую 

<script>
import axios from "axios";
import store from '../store';

export default {
  name: "BookList",
  data() {
    return {
      students: [],
      errors: [],
      state: this.state.isLoggedIn,

    };
  },
})
</script>

<template>
{{this.state}}
</template>

Но я получаю ошибки, когда делаю так. Пожалуйста, может кто-нибудь, пожалуйста, помогите, в чем проблема.

1 Ответ

0 голосов
/ 28 мая 2019

Вам не нужно импортировать ваш магазин в ваш компонент. Вместо этого вы должны получить к нему доступ, используя this.$store.

Для доступа к состоянию хранилища лучшим (и рекомендуемым) способом является сопоставление состояния внутри вашего компонента.

В вашем примере это должно быть что-то вроде: 

import { mapState } from 'vuex'

export default {
    ...
    computed: {
        ...mapState(
            isLoggedIn: 'isLoggedIn'
        )
     }
}

В вашем шаблоне this не требуется. Просто назовите недвижимость по названию: 

{{ isLoggedIn }}
...