Почему стор недоступен в дочерних компонетах?

Question

[Ilya]

При инициализации стора в главном компоненте он виден, но в дочерних нет, что я делаю не так?

Точка входа:

import Vue from 'vue/dist/vue'
import { store } from './store/index';

import PopupWrapper from './components/PopupWrapper/PopupWrapper.vue'
import PopupCallback from './components/PopupCallback/PopupCallback.vue'

new Vue ({
	store,
	el: '#app',
	components: {
		PopupWrapper, PopupCallback,
	}
})

Файл хранилища:

import Vue from 'vue/dist/vue';
import Vuex from 'vuex';

Vue.use(Vuex);

import { PopupWrapper } from '../components/PopupWrapper/PopupWrapper.store'
import { PopupCallback } from '../components/PopupCallback/PopupCallback.store'

export const store = new Vuex.Store({
	modules: {
		PopupWrapper,
		PopupCallback
	}
});

Comments

[Evgeny Kulakov]

Как поняли, что он не виден, как обращаетесь к нему в компонентах?

Answer 1

[Alexander]

Добавьте в точку входа:

import Vuex from 'vuex';
Vue.use(Vuex);

А из стора уберите:
Vue.use(Vuex);

Comments

[Ilya]

в таком случае получается [vuex] must call Vue.use(Vuex) before creating a store instance.

[Alexander]

Илья: сделайте Vue.use(Vuex) перед тем, как импортируете store

[Ilya]

Alexander: бесполезно(я так и делаю

[Alexander]

Илья: а как вы вообще проект собираете, вебпак? и как обращаетесь к стору в компонентах (в дочерних частности)?

[Ilya]

собираю вебпаком, в дочерних компонентах обращаюсь через this.$store

[Alexander]

Илья: а если вернуть Vue.use(Vuex) в стор, а в точке входа то же самое опустить под import PopupCallback from './components/PopupCallback/PopupCallback.vue'?

[Ilya]

Alexander: пробовал так, не помогает, вообще странно, я даже код скопировал из рабочего проекта, все равно что то не то

[Ilya]

Alexander: Сейчас сделал сборку, и запустил просто html страницу, теперь стор виден, когда опять запускую дев сервер то не видно

[Alexander]

Илья: а что в конфиге вебпака?

[Ilya]

Сейчас запустил дев серверс но типо с NODE_END = production и опять стор было видно, вот конфиг:

import path from "path";
import webpack from "webpack";
import ExtractTextPlugin from "extract-text-webpack-plugin";
import HtmlWebpackPlugin from "html-webpack-plugin";
import SpritesmithPlugin from "webpack-spritesmith";
import CleanWebpackPlugin from "clean-webpack-plugin";
import SpriteLoaderPlugin from 'svg-sprite-loader/plugin';


const isProd = (process.env.NODE_ENV === "production");
const plugins = [
	new SpriteLoaderPlugin(),
	new webpack.HotModuleReplacementPlugin(),
	new webpack.optimize.CommonsChunkPlugin({
		name: "commons",
		filename: "js/commons.[hash].js",
	}),
	new webpack.optimize.UglifyJsPlugin({
		sourceMap: true,
		compress: {warnings: false}
	}),
	new webpack.NamedModulesPlugin(),
	new HtmlWebpackPlugin({
		filename: "index.html",
		chunks: ["main", "commons"],
		template: path.join(__dirname, "/src/index.pug")
	}),
	new webpack.ProvidePlugin({
		$: "jquery",
		jQuery: "jquery",
		_: "lodash"
	}),
	new SpritesmithPlugin({
		src: {
			cwd: path.resolve(__dirname, "./src/assets/sprites/"),
			glob: "*.png"
		},
		target: {
			image: path.resolve(__dirname, "./src/assets/sprite.png"),
			css: path.resolve(__dirname, "./src/styles/tools/sprite.scss")
		},
		apiOptions: {
			cssImageRef: "~sprite.png"
		}
	})
];

isProd ? plugins.push(new ExtractTextPlugin("css/styles.[hash].css"), new CleanWebpackPlugin(["./build"])) : null;

export default {
	entry: path.join(__dirname, "./src/app.js"),
	output: {
		path: path.join(__dirname, "./build/"),
		filename: "js/bundle.[hash].js"
	},
	plugins,
	devServer: {
		contentBase: path.join(__dirname, "./build/"),
		port: 3000,
		noInfo: true,
		overlay: true,
		hot: true
	},
	devtool: "source-map",
	module: {
		rules: [
			//---------------------JS----------------------//
			{
				test: /\.(js|jsx)?$/,
				use: "babel-loader",
				include: path.join(__dirname, "/src"),
			},
			//---------------------VUE----------------------//
			{
				test: /\.vue$/,
				use: "vue-loader",
				include: path.join(__dirname, "/src")
			},
			//--------------------PUG--------------------//
			{
				test: /\.pug$/,
				loader: "pug-loader",
				options: {pretty: true}
			},
			//---------------------Styles---------------------//
			{
				test: /\.(sass|scss|css)$/,
				use: isProd ?
					ExtractTextPlugin.extract({
						fallback: "style-loader",
						use: [
							{loader: "css-loader", options: {sourceMap: true, minimize: true}},
							{loader: "postcss-loader", options: {sourceMap: true}},
							{loader: "sass-loader", options: {sourceMap: true}}
						]
					})
					: [
						{loader: "style-loader", options: {sourceMap: true}},
						{loader: "css-loader", options: {sourceMap: true}},
						{loader: "postcss-loader", options: {sourceMap: true}},
						{loader: "sass-loader", options: {sourceMap: true}}
					]
			},
			//--------------------Fonts--------------------//
			{
				test: /\.(woff2|ttf|eot)$/,
				use: "file-loader?name=assets/fonts/[name].[ext]&publicPath=../"
			},
			//--------------------Images--------------------//
			{
				test: /\.(png|jpg|jpeg|gif)$/,
				use: "file-loader?name=assets/images/[name].[ext]&publicPath=../"
			},
			//--------------------Video--------------------//
			{
				test: /\.mp4$/,
				use: "file-loader?name=assets/video/[name].[ext]&publicPath=../"
			},
			//---------------------SVG---------------------//
			{
				test: /\.svg$/,
				use: [
					"svg-sprite-loader?" + JSON.stringify({
						name: "[name]",
						prefixize: true,
						options: {
							extract: true,
							spriteFilename: 'svg-sprite.svg'
						}
					}),
					"svgo-loader?" + JSON.stringify({
						plugins: [
							{
								addClassesToSVGElement: {
									className: "icon"
								}
							},
							{removeTitle: true},
							{convertPathData: false},
							{removeUselessStrokeAndFill: true}
						]
					})
				]
			}
		]
	},
	resolve: {
		modules: ["node_modules", "assets", "src"]
	}
};

[Alexander]

Илья: честно говоря, я уже не знаю куда смотреть, без всего кода приходится идти по приборам ¯\_(ツ)_/¯

Я бы еще попробовал:
1) экспортировать стор как export default store, а импортировать как import store from './store/index'
2) решение которое помогло кому-то отсюда (меня мучает подозрение, что вы пробовали...но мало ли):

store: require('./store/index.js'),
(естественно перед этим надо убрать import { store } from './store/index')

[Ilya]

Alexander: В общем отключал hmr тогда все было ок, не пойму как они могут конфликтовать, если интересно вот репа https://github.com/ilyapashkov/Evona

[Alexander]

Илья: я заметил, что в store вы импортируете min-версию vuex, есть ли в этом особый смысл, все равно ведь потом сожмётся все? Может попробуете не min версию? (Может по какой то причине вебпак не может сделать хот релоад, когда встречает минифицированную версию, не знаю).

[Ilya]

Alexander: В общем решил проблему отключив HMR, спасибо за оказаную помощь!!!