Мне нужно создать компонент Vue, который будет принимать данные Json из хранилища Vuex. Когда я создаю тестовый код в песочнице, все работает. Но при попытке перенести этот код в проект начинаются проблемы.
Тестовый код в песочнице (работает, задачу решает): https://jsfiddle.net/ostapenko25/s3yzpgea/13/
Рабочий код в проекте отличается тем, что хранилище в проекте уже разбито на модули, и мне нужно создать и поключить новый модуль. Я делаю это так:
Файл index.js с регистрацией модулей Vuex:
import Vue from 'vue'
import Vuex from 'vuex'
import filters from './filters'
import odds from './odds'
import games from './games'
import games_list from './games_list'
import user from './user'
import vuexteststore from './vuexteststore'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
filters,
odds,
games,
games_list,
user,
vuexteststore // мой новый компонент
}
})
Модуль хранилища нового компонента vuexteststore.js (отличается от кода в песочнице, т.к. мне нужно создать не корневой компонент, а дочерний):
export default {
state: {
posts: [],
},
actions: {
loadData({commit}) {
axios.get('https://jsonplaceholder.typicode.com/posts').then((response) => {
commit('getPosts', response.data)
})
}
},
mutations: {
getPosts(state, posts) {
state.posts = posts
},
}
}
Новый компонент vuextest.vue
<template>
<ul>
<li v-for="post in posts">
<h1>
{{post.id}}) {{post.title}}
</h1>
<p>
{{post.body}}
</p>
</li>
</ul>
</template>
<script>
import { mapState } from 'vuex'
export default {
name: "VuexTest",
computed: {
...mapState(['posts']) // в песчнице эта строка выглядит как Vuex.mapState(['posts']), но в проекте такая конструкция приводит к ошибке Vuex is not defined
},
created() {
this.$store.dispatch('loadData')
}
}
</script>
Затем я поключаю новый компонент внутрь родительского компонента, где он должен быть расположен в проекте. Новый компонент отображается, однако данные из хранилища не выводятся. Vue-Devtools показывает posts:undefined. То есть компонент подключен, но не получает данные и не рендерится. Думаю, я неправильно вызываю action или mapState. Подскажите, пожалуйста, как сделать это корректно.
В модулях Vuex хранилище state должно являться функцией, которая возвращает объект с данными ( аналогия с date в компонентах )
state() {
return {
posts: [],
}
}
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Шрифты подгружаются в src, появляются и сразу же становятся белымиЕсли убрать свойство font-family в body, подгружаются дефолтные шрифты
Паршу сайт, есть функцияКак мне вернуть из этой функции значение? Как я понимаю нужно сделать после each then, который будет возвращать resolve, но я получал...
При оценке $('phone-details') в консоли элемент выводится, $ так же в консоли определен, но при клике на строку таблицы появляется ошибка ReferenceError: $ is not defined