详细说明如何更好地使用模块vuex

一、前言

项目中如何使用vuex？我以前写在非模块末尾。可能大家写的和我一样，但是回过头看vue的文档，发现还是模块化使用vuex比较好。vue是一个单页应用程序，但只有一个页面，所以主页或列表页相当于这个页面的一个模块。也可以理解为一个个组件。毕竟组件化、组件抽取、组件封装都是比较热门的。废话有点多，先扔个图。

演示连接：https://github.com/cookie-zhang/vuex_Demo

沟通还是很麻烦，所以vuex诞生了。

二、什么是vuex？

有人说是外挂，有人说是仓库。这位官员说的话更容易理解。Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随着相应的规则而变化。其实就是为vue做数据管理，更好的存储数据和对应的数据。

3.什么时候使用vuex最好？

官方语言的应用：Vuex可以帮助我们管理共享状态，附带了更多的概念和框架。这需要在短期和长期利益之间进行权衡。如果您不打算开发大型单页应用程序，使用Vuex可能会很麻烦且多余。确实如此。如果你的应用足够简单，最好不要用Vuex。一个简单的存储模式对你来说已经足够了，但是如果你需要构建一个大型的单页应用，你可能会考虑如何更好地管理组件外的状态，Vuex将成为一个自然的选择。

第四，用图片说明原理

四个核心模块：

State: Translation: state实际上是一个数据状态管理对象，在这里可以初始化一些想要的数据。Getters:翻译：Winner，getter是状态的数据对象的读取，意思是上表面。可以看作是获取数据前的重新编辑，相当于对数据进行过滤处理。Getters就像计算属性一样。getter的返回值将根据其依赖关系进行缓存，只有当其依赖关系值发生变化时才会重新计算。动作：翻译：动作，我们可以在其中定义我们想要执行的异步方法，这里它不会立即执行，而是转到页面中的调度方法并提交变体。页面上有两种调度方式，而不是直接改变状态。首先是这个。$store.dispatch('xxx ')。二是使用mapActions辅助功能将组件的方法映射到store.dispatch调用(体现在Demo中)。变体：翻译：突变，在突变中改变状态的方法有很多种，也就是和翻译一样，可以改变状态中的数据。尝试改变数据状态的唯一方法。第五，去看演示

不要说初始化项目，只是根据文档一步一步的生成

目录结构：

页面显示

模块化数据

首先，在存储中创建modudel文件夹，并分别创建homeDataStore.js和listDataStore.js。这两个模块分别存储相应页面的数据。从上面的页面显示中，我们可以看到我只在列表页面上写了数据，所以我们以列表页面的座位示例为例。

listDataStore.js的代码表示

从axios的常量列表数据={ namespace d : true，//导入爱可信注意模块化管理数据请不要忘了命名空间的开启state:{ List:[]，count: 0，componentdata :[]，number: 0 }，actions : { getListData(context){ new Promise((解析，拒绝)={ axios.get('./././static/listData.json ').然后((res)={ context.commit('ListData '，{ ' ListData ' : RES . data。ListData })})})，handleAdd(context){ context。提交(' handleAddState ')} }，做了必要的修改：{ ListData(state，paylod){ state .List=paylod.listDatas }，handleAddState(state){ state。数量；}，getter s : { List : state=state .List，count: state=state.count，number : state=state。数字} }导出默认列表数据；数据格式是一样的，每个页面都是这四大核心模块组成

商店文件夹下面的index.js文件展示

//这个是总的商店，抛出各个模块的从“Vue”存储导入Vue从“Vuex”导入Vuex从“HomeDATa”导入./moudel/homeDataStore "从导入列表数据"。/mou del/ListDatastore ' Vue。use(Vuex)const store=new Vuex .存储({ modules:{ homeData，listData，}})导出默认存储；在这里引入各个模块的数据。

main.js文件展示

从“vue”导入某视频剪辑软件从“应用程序”导入/App”从导入路由器"。/路由器"从导入存储"。/store/index ' Vue。配置。生产提示=false/* eslint-禁用no-new */new Vue({ El : ' # App '，路由器，存储，渲染： h=h(App)})引入商店，将商店注册到某视频剪辑软件的实例上面，这样对应模块的数据基本格式是这样，接下来在看看页面中怎么调用的吧。

页面使用商店数据列表页展示

模板差异路由器-链接到='/'首页家庭/路由器-链接br/这是列表页列表br/ul li v-for='列表中的项目v-bind :键=' item。id“{ item。item } }/Li/ul分区计算：/div div { { number } }/div button @ click=' handleAdd()' add/button/div/template script从' vuex '导出导入{ mapgeters，mapActions }导出默认{ name : ' list }，data(){ return } }，computed: {.mapgetter(' listData '，['List '，' number']) }，methods:{ //方法一：mapActions('listData '，['getListData '，' handleAdd'])，//方法二：mapActions({ getListData : ' listData/getListData '，handleAdd : ' listData/handleAdd ' })}，mounted(){ this。getListData()；} }/脚本样式/样式引入从“vuex”导入{地图收集者，地图行动}辅助函数，在计算计算属性里面把对应页面的数据也就是列表页对应的列表页的商店拿到列表编号，也可以认为是读取里面的数据，将数据映射到页面来，这样就拿到了响应的数据，方法里面是映射到页面的方法，比如得到一组数据方法就是走接口请求过来的数据，当页面加载完后调用，也就是在挂载的。手柄添加方法也是派发，在对应的行动里面可以看到。如果不用辅助函数，也就会用到派遣，这里没在细讲

演示地址：https://github.com/cookie-Zhang/vuex _ Demo

六总结

以上描述简单易懂，可以在项目中直接使用这种模块化管理数据的方式，总体来看就更好的理解娣的流程图，单向数据流连通起来就可以形成一个完美的闭环。没有太多文采，只想用最近单易懂的语言描述自己的理解，希望对大家的学习有所帮助，也希望大家多多支持我们。