Vuex是一个专为Vue。js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,如果您不打算开发大型单页应用,使用Vuex可能是繁琐冗余的。如果您需要构建是一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex将会成为自然而然的选择。
之前在做旅游页的时候对Vuex进行了简单的了解。近期在做Vue项目的同时重新学习了Vuex。本篇博文主要总结一下Vuex单状态库和多模块模块的两类使用场景。
本篇所有代码是基于Vue-Cli 3。x版本的脚手架工具进行编写的。
这是一个仅有单个Vuex商店状态库的演示。当项目中使用一个Vuex状态库就已经足够的时候,可以使用这种方式。
本演示使用了一个增量与衰减的增/减事件来体现商店数据的变化。
<强>商店。js
由于状态库是单一的,仅有一个商店。js文件管理状态库。在该文件中一开始进行进口的引入,然后使用Vue.use (Vuex)使用Vuex,之后分别定义州,突变和行动,并通过出口新Vuex违约。存储({状态、突变、行动})模块化。
//store.js
从“Vue”进口Vue
从“Vuex”进口Vuex
Vue.use (Vuex)
const状态={
数:1
}
const突变={
增量(状态){
状态。数+ +
}，
减量(状态){
状态。数,
}
}
const行动={
增量:({提交})=比;｛
提交(“增量”)
}，
递减:({提交})=比;｛
提交(“减量”)
}
}
出口新Vuex违约。存储({状态、突变、行动})
之前
<强>主要。js
在入口文件主要。js中通过进口引入店,并注册到Vue的实例上。
从“Vue”进口Vue
导入应用程序从“/App.vue。”
从“进口商店。/存储的//Vue-Cli 3. x
新Vue ({
呈现:h=比;h(应用程序),
路由器,
商店
})。美元山(“#应用”)//Vue-Cli 2. x//新Vue ({//埃尔:“#应用”,//路由器,//存储,//组件:{应用},//模板:‘& lt; App/比;//})
之前
<强>使用美元商店
在相应的组件中如下引入并在方法中使用mapActions。
& lt; template>
& lt; div类=皏uex”比;
Vuex全局开业店数{{$ store.state.count}}
& lt;按钮类型="按钮" name="按钮" @click=霸隽俊钡脑诩? lt;/button>
& lt;按钮类型="按钮" name="按钮" @click=凹趿俊痹诩? lt;/button>
& lt;/div>
& lt;/template>
& lt; script>
从“vuex”进口{mapActions}
出口默认{
方法:mapActions ([
“增量”,
“减量”
])
}
& lt;/script>
& lt; scoped>风格;
& lt;/style>
之前
<强>演示
关于单状态库的演示请参考此github
Github Demo
当项目变得非常庞大,单个商店无法满足需求的时候,可以通过多模块状态库管理多个商店,将各类状态分类进行维护。
本演示使用了增加与减少的增/减事件来体现商店数据的变化。
<强>存储
由于需要管理多个商店,因此在项目目录中创建店文件夹,并创建模块文件夹用来放置各个商店文件,并使用指数。js作为入口文件。具体结构请查看演示。
主要。js
同样在主要。js中通过进口引入店,但这里是引入指数。js这个入口文件。
从“Vue”进口Vue
导入应用程序从“/App.vue。”
从“进口商店。/商店/指数”
之前
<强>使用美元商店
除了使用方式有一定不同之外,方法中的mapActions也更换了书写方式,第一个参数是对应存储管理的数据,第二个参数是关于操作事件的数组。
& lt;模板lang=癶tml”比;
& lt; div类=癮”比;
页面一个{{$ store.state.countA.countA}}
& lt;按钮类型="按钮" name="按钮" @click=疤砑印钡脑谠黾? lt;/button>
& lt;按钮类型="按钮" name="按钮" @click=凹跎佟弊４巧炯? lt;/button>
& lt;/div>
& lt;/template>
& lt; script>
从“vuex”进口{mapActions}
出口默认{
方法:mapActions (“countA”(“增加”、“减少”))
}
& lt;/script>
& lt;风格lang=" css "比;
& lt;/style>
