Vuex Store Module 访问状态 [英] Vuex Store Module access state
问题描述
我想知道如何从另一个文件访问模块存储/状态.到目前为止，这是我的代码:
/store/index.js
从'vuex'导入Vuex；从'./modules/categories'导入类别；Vue.use(Vuex);const store = new Vuex.Store({状态: {},动作:{},突变:{},吸气剂:{},模块:{类别，},});导出默认商店；/store/modules/categories.js
const 类别 = {状态: {类别: [{名称:'类别1'路径:'路径/到/那里'子类别: [{名称:'子类别1'路径:'路径/到/其他/那里'子类别:[{name: 'subsubcategory1'路径:'路径/到/其他/那里'}{name: 'subsubcategory1'路径:'路径/到/其他/那里'}]}{名称:'子类别2'路径:'路径/到/其他/那里'}]}{名称:'类别2'路径:'路径/到/那里'子类别: [{名称:'子类别2'路径:'路径/到/其他/那里'}{名称:'子类别3'路径:'路径/到/其他/那里'}]}]},动作:{},突变:{},吸气剂:{},}我希望能够在这里访问模块状态/存储，例如:/home.vue
<div><标题></标题><div class="用户行"><p>用户页面</p><p>我希望能够在此处访问模块存储/状态，并能够在此处传递 getter 以从状态中过滤一些结果</p><页脚></页脚>
</模板><脚本>导入 'vue-awesome/icons';import { mapState, mapGetters } from 'vuex';从'/Headers'导入标题；从'/页脚'导入页脚；导出默认{name: '家',数据() {返回 {};},方法: {},成分: {标题，页脚，},计算:{...mapGetters(['',]),...地图状态(['类别',]),},};<style lang="scss" 作用域></风格>
现在，我以前能够访问和循环类别，但感谢 @Sumit-Ridhal 我发现我的商店模块有问题，所以我不得不改变它，现在我不知道如何访问它的状态.
提前谢谢，干杯
store.state."module name"."state data
我确实存储这样的模块.
这是索引存储.商店/index.js
从'vue'导入Vue从 'vuex' 导入 Vuex从vuex-persistedstate"导入 createPersistedState从 '@/store/posts' 导入帖子//导入外部商店 modVue.use(Vuex)导出默认新 Vuex.Store({模块:{帖子},严格:真实，插件: [createPersistedState()],状态:{......等帖子存储模块
//如何访问这个 store console.log('module state', store.state.posts.data)导出默认{状态: {数据:'dfsd'},吸气剂:{},突变:{},动作:{}}获取商店模块数据
从'@/store/'导入商店
store.state.posts.data
I want to know how to access module store/state from another file. This is my code so far:
/store/index.js
import Vuex from 'vuex';
import categories from './modules/categories';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
},
actions: {
},
mutations: {
},
getters: {
},
modules: {
categories,
},
});
export default store;
/store/modules/categories.js
const categories = {
state: {
categories: [
{
name: 'category1'
path: 'path/to/there'
subcategories: [
{
name: 'subcategory1'
path: 'path/to/other/there'
subsubcategory: [
{
name: 'subsubcategory1'
path: 'path/to/other/there'
}
{
name: 'subsubcategory1'
path: 'path/to/other/there'
}
]
}
{
name: 'subcategory2'
path: 'path/to/other/there'
}
]
}
{
name: 'category2'
path: 'path/to/there'
subcategories: [
{
name: 'subcategory2'
path: 'path/to/other/there'
}
{
name: 'subcategory3'
path: 'path/to/other/there'
}
]
}
]
},
actions: {
},
mutations: {
},
getters: {
},
}
edit: I want to be able to access modules state/store here for example: /home.vue
<template>
<div>
<Headers></Headers>
<div class="user row">
<p>User Page</p>
<p> I want to be able to access modules store/state here and be able to pass getters here to filter some results from state</p>
</div>
<Footers></Footers>
</div>
</template>
<script>
import 'vue-awesome/icons';
import { mapState, mapGetters } from 'vuex';
import Headers from '/Headers';
import Footers from '/Footers';
export default {
name: 'home',
data() {
return {
};
},
methods: {
},
components: {
Headers,
Footers,
},
computed: {
...mapGetters([
'',
]),
...mapState([
'categories',
]),
},
};
</script>
<style lang="scss" scoped>
</style>
Now, I was able to access and loop through categories before, but thnx to @Sumit-Ridhal i found out that my store module was wrong so I had to change it and now I don't know how to access its state.
Thnx in advance, Cheers
store.state." module name"."state data
I do store modules like this .
this is index store. stores/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import posts from '@/store/posts' // import external store mod
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
posts
},
strict: true,
plugins: [
createPersistedState()
],
state: {...... etc
posts store module
// how to access this store console.log('module state', store.state.posts.data)
export default {
state: {
data: 'dfsd'
},
getters: {
},
mutations: {
},
actions: {
}
}
get store module data
import store from '@/store/'
store.state.posts.data
这篇关于Vuex Store Module 访问状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
