vuex项目应用案例,vuex的实现
本文主要介绍Vuex整体案例的详细说明。本文通过一个简单的案例来说明对这项技术的理解和使用。以下是详细内容，有需要的朋友可以参考一下。
一.导言优点三。使用步骤1。安装Vuex2。引用Vuex3。创建仓库存储IV。包括模块1。状态2。吸气剂3。突变4。行动5。模块五. Vuex 1最简单的工程实例。存储数据2。获取数据3.store文件目录结构index.jsstate.js
目录
先来看看Vuex的专业介绍：
Vuex是为Vue开发的状态管理模式应用程序。它采用集中式存储来管理应用程序所有组件的状态，并确保状态以相应的规则以可预测的方式变化。
简而言之，Vuex以类似全局对象的形式管理所有组件的公共数据。如果要修改这个全局对象的数据，就得按照Vuex提供的方式来做(不能随意用自己的方式修改)。
一、简介
Vuex状态管理跟使用传统全局变量的不同之处：
Vuex的状态存储是响应式的：是您的组件使用此Vuex状态的时间。一旦发生变化，所有关联的组件都会自动更新相应的数据，省去了开发者很多麻烦。
不能直接修改Vuex的状态：如果是全局对象变量，修改起来很容易，但是在Vuex中做不到。如果你想修改它，你必须使用Vuex: commint)突变提供的唯一方法。这样做的好处是方便我们跟踪每一次状态变化，在开发过程中调试的时候非常实用。
二、优点
三、使用步骤
npm安装vuex -保存
1. 安装Vuex
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
2. 引用Vuex
要使用Vuex，我们需要创建一个实例存储，我们称之为仓库，并使用这个仓库存储来管理我们的状态。
//创建商店
const store=new Vuex。存储({ })；
3. 创建仓库Store
State:定义了应用状态的数据结构，可以在这里设置默认的初始状态。
Getter:允许组件从存储中获取数据。mapGetters辅助函数仅将存储中的getter映射到本地计算属性。
Mutation:是改变店内状态的唯一方式，必须是同步功能。
Action:用于提交突变而不是直接改变状态，可以包含任何异步操作。
Module:商店可分为模块。每个模块都有自己的状态、变异、动作、getter，甚至嵌套的子模块。
Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。
四、包含模块
假设我们有一个全局状态，count的值是5。然后，我们可以将其定义为状态对象中的键和值，并将其作为我们的全局状态。如下所示：
//创建商店
const store=new Vuex。商店({
//state存储应用层的状态。
状态：{
计数：5 //总数：5
}
});
1. State
可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等
假设我们想从state.count派生一个新的state newCount，那么使用我们的getters是合适的。
Getters接受state作为它的第一个参数。
const store=new Vuex。商店({
//state存储应用层的状态。
状态：{
计数：5 //总数：5
},
getters:{
newCount:state=state.count * 3
}
});
如何在组件中获取{{newCount}}:
导出默认值{
计算值：{
newCount(){
归还这个。$ store . getters . new count；
}
}
};
2. Getters
Vuex 给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数
我们定义了一个函数叫做突变增量，函数体就是我们要做改变的地方。
State作为第一个参数，第二个是自定义参数。
const store=new Vuex。商店({
//state存储应用层的状态。
状态：{
计数：5 //总数：5
},
//突变是修改数据状态的唯一方法
突变：{
增量(状态，值){
state.count=值；
}
}
});
我们在提交犯罪时候，第一个参数增量，就是对应在突变中的增量方法，第二个参数是自定义值。例如：
方法：{
getVal(事件){
//获取当前的按键的值
设值=事件。目标。数据集。价值；
//通过犯罪提交一个名为增量的变化
这个. store.commit(increment ，value)；
}
}
在组件中获取{{count}}方式：
导出默认值{
计算值：{
计数(){
归还这个100美元商店。状态。数数；
}
}
};
3. Mutations
用于提交突变，而不是直接变更状态，可以包含任意异步操作
只有通过动作=突变=状态，这个流程进行操作，具体步骤如下：
导出默认的新Vuex .商店({
//存放数据
状态：{
obj: {}，
},
//4.通过提交突变中的方法来处理
突变：{
getParam(状态，对象){
//5.修改状态中的数据
state.obj=对象
}
},
//2.接受派遣传递过来的方法和参数
动作：{
getParamSync(存储，对象){
//处理异步操作
setTimeout(()={
//3.通过犯罪提交一个名为getParam的变化
//动作函数接收一个商店的实例对象，因此你可以调用存储。提交提交一个变化
store.commit(getParam ，Object)；
}, 1000)
}
}
})
然后我们就在组件里这么调用就可以了
方法：{
getVal() {
let name=夏；
设年龄= 26 ;
让性=男人；
//1.通过派遣将方法getParamSync和多个参数{姓名、年龄、性别}传递给行动
这个store.dispatch(getParamSync ，{姓名，年龄，性别})
}
}
4. Action
随着项目的复杂度增大，为了方便管理Vuex，一般会将其按功能分割成不同的模块（模块),方便日后管理。每个模块拥有自己的状态、突变、动作、获取器甚至是嵌套子模块
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入状态100/州
从导入突变。/突变
从导入操作。/操作
从导入*作为吸气剂./getters
从""导入模块答./module/moduleA //模块A
从导入模块乙./module/moduleB //模块B
Vue.use(Vuex)
导出默认的新Vuex .商店({
行动，
吸气剂，
状态，
突变，
模块：{
moduleA，
模块b
}
})
moduleA.js/moduleB.js文件
//每个模块拥有自己的状态、突变、动作、获取者、甚至是嵌套子模块
导出默认值{
状态：{
文本："模块"
},
getter:{ }，
突变：{},
动作：{}
}
然后我们就在组件里这么调用就可以了
模板
div class=demo
h1{{getText1}}/h1
h1{{getText2}}/h1
/div
/模板
计算值：{
getText1(){
归还这个100美元商店。状态。模块a。文本；
},
//或
.mapState({
gettext 2:state=state。moduleb。文本；
})
}
由此可知，模块内部的状态是局部的，只属于模块本身所有，所以外部必须通过对应的模块名进行访问。
5. Modules
运用vuex语法糖mapMutations和mapGetters
五、Vuex最最简单的项目实例
a.vue 文件
从" vuex "导入{地图突变}；//引入地图突变
导出默认值{
方法：{
.地图突变({
//将变化新闻与突变中的设置_新闻关联
变更新闻："设置新闻"
}),
提交(){
//提交一个名为变化新闻的突变，并传入参数英国压力单位
让val=测试新闻；
这个。变化新闻(val)；//相当于这个. store.commit(changeNews ，val)；
}
}
}
1. 存储数据
b.vue 文件
从" vuex "导入{ mapGetters }；//引入地图获取者
导出默认值{
计算值：{
//用状态管理读取数据（读取的是getters.js中的数据)
//相当于这个store.getters.news(vuex语法糖)
.mapGetters([news])
},
已创建(){
//获取吸气剂中新闻数据
控制台。日志(这个。新闻)；
}
}
2. 获取数据
3. store文件目录结构
从“vue”导入某视频剪辑软件
从" vuex "导入状态管理
从导入状态100/州
从导入突变。/突变
从导入操作。/操作
从导入*作为吸气剂./getters
//每次修改状态都会在控制台打印原木
从" vuex/dist/logger "导入创建记录器
Vue.use(Vuex)
const debug=进程。环境。node _ ENV！==生产
导出默认的新Vuex .商店({
行动，
吸气剂，
状态，
突变，
严格：调试，//当调试=真时开启严格模式（性能有损耗)
插件：调试？[createLogger()] : []
})
index.js
常量状态={
新闻：{}
}
导出默认状态；
state.js
常量突变={
SET_NEWS(state，val) {
state.news=val
}
}
导出默认突变；
mutations.js
//异步处理
常量操作={
M_NEWS({ commit }，val) {
commit(SET_NEWS ，val)；//提交突变修改
}
}
导出默认操作；
actions.js
//通常通过吸气剂取数据（这个100美元商店。吸气剂。新闻；)
导出const news=state=state.news //不做其他处理直接映射出去
getters.js
在主页。射流研究…中引用
从导入存储/store //vuex存储文件
新Vue({
埃尔： #app ，
路由器，
店，
组件：{
应用
},
模板："应用程序/"
})
到此这篇关于状态管理总体案例详解的文章就介绍到这了，更多相关状态管理总体内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。