vuex使用步骤,怎么使用vuex的数据
如果说JQuery是手工作坊，那么Vue.js就像工厂。虽然Vue.js能做的事JQuery都能做，但前者在代码量和流程标准化方面更胜一筹。下面这篇文章主要介绍Vue项目中如何使用vuex的相关信息，有需要的朋友可以参考一下。
目录
什么是Vuex？Vuex使用循环图my store目录实现了vuex的示例摘要。
Vuex 是什么？
官网解释：Vuex是专门为Vue.js应用开发的状态管理模式。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。
当多个页面需要共享数据时，我们可以使用Vuex。例如：
用户个人信息管理模块；
从订单结算页面，进入选择优惠券页面，选择优惠券页面。如何保存选中的优惠券信息？保存州优惠券信息。当选择优惠券时，突变将提交它。在订单结算页面，获取选中的优惠券，更新订单优惠信息。
购物车模块，每次调用接口获取购物车数量，效果都实现了，但是每次HTTP请求都消耗浏览器性能。
我的订单模块，订单列表也点击取消订单，然后更新对应的订单列表。在这种情况下，Vuex，state还用于存储一个状态，监控这个状态，并在它发生变化时更新相应的列表；
Vuex背后的基本思想借鉴了Flux和Redux。与其他模式不同，Vuex是专门为Vue设计的状态管理库，利用Vue.js的细粒度数据响应机制进行高效的状态更新。
vuex使用周期图
我的store目录
模块是存储不同的模块。
Action-types.js是为了方便管理，字符串映射，标准化管理。
Mutation-types.js也是为了方便管理。想象一下，一大堆功能模块混在一起，有多糟糕。
索引. js
实现一个vuex的示例
让我们创建这些文件。
action-type . js
//获取用户信息
导出常量查询用户信息=查询用户信息
突变类型. js
//设置用户信息
导出常量SET_USER_INFO=SET_USER_INFO
在模块下创建一个base.js文件。
base.js
从导入{查询用户信息}./操作类型
从导入{ SET_USER_INFO，SET_CUR_MENU_ID }./突变类型
从 @/assets/js/api.js 导入api
//创建状态
常量状态={
//用户信息
userInfo: {}，
}
//异步获取数据，提交突变，突变改变状态
常量操作={
/*获取用户信息*/
[查询用户信息] ({提交}，参数){
返回api.get({
URL:“/system/getUser”，
}，params.vm)。然后(data={
提交(设置用户信息，数据)
返回数据
})
}
}
const getters={
//当前用户信息
userInfo: state=state.userInfo
}
//同步采集
常量突变={
[设置用户信息](状态，数据){
state.userInfo=data
}
}
导出默认值{
状态，
行动，
吸气剂，
突变
}
索引. js
从“vue”导入Vue
从“vuex”导入Vuex
从导入基础。/modules/base.js
vue . use(Vuex)；
导出默认的新Vuex。商店({
模块：{
基础
}
})
Header.vue
span { { $ store . getters . userinfo . name } }/span
主页. js
从“vue”导入Vue
从导入存储。/商店
从“@/store/action-types.js”导入{ QUERY_USER_INFO }
store.dispatch(QUERY_USER_INFO，{})。最后(()={
新Vue({
路由器：路由器(商店)，
店，
render: h=h(App)
}).$ mount(“# app”)
})
总结
关于如何在Vue项目中使用Vue的这篇文章到此为止。关于如何在Vue项目中使用Vue的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。