Vuex State模块化

当应用非常复杂的时候，store对象就会变得非常臃肿。
为了解决上面的问题，我们将store分成模块
文件目录如下
方案一：

方案二：

状态管理中 state 就相当于 vue中 data属性， getters就相当于vue中的computed属性， mutations,
actions就相当于vue中的方法

getter

gettetr被认为是计算属性返回值会作为依赖缓存起来只有当依赖发生变化时才会重新计算

mutation

action

模块化

import Vue from "vue"
import Vuex from "vuex"
import footerStatus from './modules/footerStatus'
import collection from './modules/collection'Vue.use(Vuex)export default new Vuex.Store({modules: { // 这里声明两个模块，后面使用就知道为啥要这样搞了collection,footerStatus}
})

1.模块化以后，state的获取务必要加上一个模块名，才能获取到模块里面的对象

eg:  this.$store.state.moduleA.name

2.在辅助函数中我们同样需要这样做

 ...mapState({name:state => state.moduleA.name
})

3.命名空间
一旦去做了模块化处理，这样一定会产生命名冲突。
所以我们利用了namespace:true来避免命名冲突
当模块被注册之后
模块里面的state action mutation会自动根据模块名自动调整命名

export default moduleA {namespace:true,state,action,mutation}

同样vuex的开发者考虑到，我们每次都要写模块名很麻烦，所以在辅助函数中给我们提供了一个参数位置来绑定命名空间

...mapstate('moduleA',{name：state=>state.name
})

const board = {//数据当前的状态state:{boardDataset:[]},
//get获取状态 类似于computedgetters:{getBoardDataset(state){return state.boardDataset}},
//同步更新状态actions:{changeBoardDataset(state , item){state.boardDataset.push(item)}},
//异步更新状态mutations:{asynChangeBoardDataset(context,item){context.commit('changeBoardDataset',item)}}
}//导出模块
export default board;

在需要的组件中我们通过辅助函数进行引用：

 ...mapState({boardDatasets:state=>state.board.boardDataset})

Vuex State模块化相关推荐

用Vue3.0+typescript写vuex的模块化拆分
用Vue3.0+typescript写vuex的模块化拆分最近自己学习了下vue3.0+ts,在vuex这一块遇到些问题记录一下以下代码中的写法请参考官方vuex文档: https://next. ...
几分钟搞懂Vuex(State,Mutations,Actions)
文章目录 State Getters Mutation Actions 这是Vuex官方给出的图片,看起来有点不好理解,上详解!!!! 开始介绍之前,我们需要将Vuex挂载到Vue实例上面,这样我们才 ...
vuex清掉数据_解决vuex state数据刷新清空的几种方法
vuex state刷新配置的数据会刷新作为一个vue小白,刚接触到vue,很多技术都是慢慢摸索着前行的. 1.最近要做一个前端,菜单和导航都要在json中配置,看了一天vue官网,发现可以在vue ...
java写mapstate算子,vuex state及mapState的基础用法详解
vuex state及mapState的基础用法详解 2019-01-07 编程之家收集整理的这篇文章主要介绍了vuex state及mapState的基础用法详解,编程之家小编觉得挺不错的,现在分享 ...
vuex 的模块化+命名空间
一.目的:让代码更好维护,让多种数据分类更加明确二.修改 store.js const person = {namespaced: true; // 开启命名空间state: {},getters: ...
vue —— vuex namespaced模块化编码
在需求过多的时候就会发生在actions mutations state getters 编写代码过多的情况会很混乱,可以把每个需求的代码进行分组查看时便可根据不同的需求查看.不过在每个需求里还是要 ...
vuex state使用
访问vuex中的state值方式1 <div>{{$store.state.count}}</div> 方式2 <template><div id=&quo ...
vuex的模块化管理~~~狂徒李四
路由模块化创建问价路径如下: 路由模块化思路 /** * * 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { //路径 } * 在main.js引入,将引 ...
vue状态管理存取数据_vue状态管理vuex从浅入深详细讲解
1.vuex简介以及创建一个简单的仓库 vuex是专门为vue框架而设计出的一个公共数据管理框架,任何组件都可以通过状态管理仓库数据沟通,也可以统一从仓库获取数据,在比较大型的应用中,数据交互庞大的情 ...

Vuex State模块化

getter

mutation

action

模块化

Vuex State模块化相关推荐

最新文章

热门文章