Vuex的基本概念、项目建设和入坑点

Vuex是专门为Vue.js应用开发的状态管理模式。它使用集中存储来管理所有组件的公共状态，并确保状态以可预测的方式随着相应的规则而变化。

Vuex的四个核心

1.状态驱动应用程序的数据源

2 .突变基因突变如C#属性得到设置

3 .行为

4 .吸气剂阅读器

上图绿色虚线是Vuex的核心，公共状态存储在状态中。改变状态的唯一方法就是通过突变来改变。也许你现在还不明白这张图。看完本文的讲解和案例演示，再回来看这张图，相信你会有更好的理解。

如何介绍Vuex？

1.npm安装vuex

2.安装后，在全球范围内使用您的Vuex

3.要创建store对象，最好在src中创建一个类似Store的文件夹，然后创建index.js

4.注册在main.js中使用

从' vuex' Vue.use(Vuex)导入Vuex；Const store=new Vuex。Store({ //待添加}) newvue ({el:' # app '，Store，render:h=h (app)})为了解释Vuex，我们做了一个项目。该项目需要连接apicloud，axios和bootstrap用于异步操作，包括登录注册和

npm安装bootstrapnpm安装axios

router.js

从“vue”导入Vue从“vue-router”导入Router Vue . use(Router)导出默认的新Router({ routers :[{ path : '/'，name: 'index '，component:()=import('./view/index . vue ')}，{ path:'/detail/:id '，name:'detail '，component:()=import('./view/detail . vue ')}，{ path:'/login '，name:'login '，component:()=import('./view/log in . vue ')}，{ path:'/register '，name:'register '，component:()=import('./view/register . vue ')}]})store . js

让我们在上面的代码中解释vuex的奥秘。state是所有组件提出的数据，用于所有组件的公共数据。突变就像C#中的get\set和属性赋值器，其中一个方法的两个参数除了State只能取一个参数。

Actions是一种操作数据的方法。据说您需要在操作中更改状态中的数据，因此您必须通过commit关键字将其提交给Variations。还有一点就是动作中的很多操作都是关于异步处理的，最重要的是它操作的是状态数据。什么是吸气剂？它是组件访问vuex的入口，其中编写了操作方法，也是一个过滤器，就像程序中的三层架构BLL一样。

main.js

//要用“import”命令加载的vue构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue“从App导入”。/App“从导入路由器”。/router '从' bootstrap/dist/CSS/bootstrap . CSS '从' import store '导入bootstrap。/store/index . js ' vue . config . production tip=false/* Eslit-disable no-new */new vue({ El : ' # app '，路由器，存储，//加载全局对象上的仓库组件： {app}，template3360' app/'})

从“vue”导入某视频剪辑软件从“vuex”导入状态管理从"导入美国石油学会./utils/api.js'var api=新API('货物')var userApi=新API('用户信息')；vue。使用(Vuex)；常量状态={ user: null，products :[]}常量突变={ //加载产品数据INIT_PRODUCTS(状态，数据){ state.products=数据；}，SET_LOGIN_USER(状态，u){ state。用户=u；} } const actions={ LOAD _ PRODUCTS({ commit }){ API .选择()。然后(res={ commit('INIT_PRODUCTS '，RES . data)；}) }，LOGING({ commit }，user) { return userApi .选择()。然后(res={让用户=res.data//所有的用户for(let u of users){ if(u . name==USER。name u . password==USER。密码){ commit(' SET _ log in _ USER '，u)；返回u；} } }) }、REGISTER({ commit }、user) { return userApi .插入（用户)。然后(RES={控制台。日志(资源数据)；返回"确定";}).catch(err={ return err；})} } const getter={ ALL _ PRODUCTS(state){ return state。PRODUCTs}，GET_PRODUCT_BYID:(状态)=函数(id) { //遍历is==id for(状态的字母p。产品){ if(p . id==id){ return p；} }返回null}}//仓库const store=new Vuex .存储({ state: state，突变：突变，actions: actions，getters: getters })导出默认存储；navbar.vue

模板nav class=' nav bar nav bar-expand-LG nav bar-dark BG-dark ' div class=' container ' a class=' nav bar-brand ' href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow '购物车/a ul class=' nav bar-nav ml-auto ' Li class=' nav-item active down ' v-if=' user！==null ' a class=' nav-link下拉-toggle ' data-toggle=' drop down ' @ click=' show drop down=！'显示下拉列表'欢迎你： { { user。name } }/a div class='下拉菜单show ' a class='下拉项目' href=' # rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow ' rel='外部nofollow '我的订单/a div class='下拉分隔符'/div a class='下拉项'注销/a/div/Li Li class=' nav-item active ' style=' margin-right :5 px ' v-if=' user===null ' router-link class=' nav-link BTN BTN-warning BTN-sm ' style=' color : # fff ' to='/log in '登录/router-link/Li Li class=' nav-item active ' v-if=' user===null ' router-link class=' nav-link BTN BTN-danger BTN-sm ' style=' color : # fff ' to='/register '注册/router-link/Li/ul/div/nav/模板脚本导出默认值{ data(){ return { show down : False } }，计算值： { user(){ return this . $商店。国家。用户；} }}/scriptproduct.vue该组件用于显示商品的详细信息

模板div class=' card ' img class=' card-img-top ' src=' http :/./资产/徽标。png ' alt=' Card image cap ' div=' Card-body ' H5 class=' Card-title ' {产品。名称} }/H5 p class='卡-文本' {产品。描述===null？'暂无描述：product.description}}/p p价格： { { product。price } }/p a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-警告float-left ' @ click=' goDetail '查看详情/a a href=' # ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' rel=' external nofollow ' class=' BTN BTN-主浮点-右'加入购物车/a/div/div/template脚本导出默认{ prop s :[' product ']，方法： { Godetail(){ console。日志(这个。产品。id)；这个$路由器。push(`/detail/$ { this。产品。id } `)；} } }/脚本程序入口APP.vue

模板div id='app '导航条/导航条路由器-视图/路由器-视图/div/templatescriptionnav bar from ' ./view/components/nav bar ' export default { name : ' App '，components 3360 { nav bar } }/script注册：通过这个$store.dispatch去调用行动中的方法，其中有趣的是犯罪的参数竟然被方法名给.这个以后在思考。

模板div class=' container ' div class=' row ' div class=' card ' style=' margin :50 px auto；宽度：400像素' div class='卡体' H5 class='卡-标题'注册/h5 hr div class='表单-组'标签为=' '用户名/标签输入类型=' text ' class=' form-control ' v-model=' user。名称'/div class=' form-group '标签为=' '真实姓名/label输入类型=' text ' class=' form-control ' v-model=' user。“=”的真实名称“/div class=”表单组标签密码/label输入类型=' password ' class=' form-control ' v-model=' user。密码'/div div class='表单-群组'按钮class=' BTN BTN-主要BTN-区块' @点击='注册'注册/button/div/div/template脚本导出默认值{ data(){ return { user : { name : ' '，realname: ' '，password:'' } } }，methods:{ register(){ this .$store.dispatch('REGISTER '，this.user).然后(res={ if(res=='OK ')这个$路由器。push('/index ')；})} } }/脚本登录

模板div class=' container ' div class=' row ' div class=' card ' style=' margin :50 px auto；宽度：400像素' div class='卡体' H5 class='卡-标题'登录/h5 hr div class='表单-组'标签为=' '用户名/标签输入类型=' text ' class=' form-control ' v-model=' user。名称'/div class=' form-group '标签为=' '密码/label输入类型=' password ' class=' form-control ' v-model=' user。密码'/div div class='窗体-组'按钮class=' BTN BTN-主BTN-阻止' @单击='登录'登录/button/div/div/模板脚本导出默认值{ data(){ return { user : { name : ' '，password:'' } } }，methods:{ login(){ this .$商店。派单(' LOGING '，this.user).然后(RES={控制台。日志(RES)；如果(res)这个$router.push('/') } }) } }}/script主页面

模板差异类="容器“h1商品列表/h1 div class=' row ' div class=' col-MD-4 ' v-for=' p in products ' : key=' p . id '！-传递商品信息到子组件-product-card : product=' p '/product-card/div/div/div/templatescriptimport ProductCard from ' ./组件/产品。vue ' export default { components 3360 { ProductCard }，computed : { products(){ return this .$商店。吸气器。ALL _ PRODUCTs} },创建了(){这个.$商店。派单(‘加载产品’)；} }/脚本本文结语知识总结：

获取全球资源定位器(统一资源定位符)中的参数

让id=这个$路线。参数。id；细节=这个$商店。getter s . get _ PRODUCT _ BYID(id)；有的小伙伴在复制我的代码运行报错，说什么未初始化；一定要在index.vue添加这个代码，加载产品给数据初始化

创建了(){这个.$商店。派单(‘加载产品’)；}跳转路由

这个$ router . push('/')apilclound万能帮助类

从“加密”//导入加密加密从“axios”类API {构造函数(类名){ this。API=` https://d。API云。com/MCM/API/$ {类名} }导入axios让标识=让密钥=让现在=日期。now()；//当前时间让sha1=加密。创建哈希(' sha1 ')；sha1。更新(ID ' UZ ' KEY ' UZ '现在)；axios。默认值。标题[' X-APICloud-AppId ']=ID；axios。默认值。headers[' X-APICloud-AppKey ']=sha1。摘要(十六进制).现在；}选择(){返回axios。得到(这个。原料药)；}插入(obj){返回axios。贴吧(这个。API，obj)；}更新(id，obj){ //RESTFUL API返回axios.put(this.api `/${id} `，obj)；}删除(id){返回axios。删除(这个。API `/$ { id } `)；} }导出默认应用程序接口还有同学问我父组件和子组件如何传值？

在父页面引用的地方以':'表示的值都可以在子页面的小道具获取到

模板分区h3图书管理/h3hr div class=' row ' div class=' col-MD-4 col-sm-4 ' v-for=' b in books ' : key=' b . id ' book-detail @ ABC=' XYZ ' : book=' b ' : msg=' ABC '/book-detail/div/模板脚本导入book detail from ' ./组件/bookdetails。vue ' export default { components : { BookDetail }，data(){ return { abc:'heheda '，books:[{ id:1，name:'7天爪哇岛从入门到放弃，text: '到底是人性的扭曲，还是道德的沦丧。青年男子为何突然脱发，中年男人为何删库跑路，price:20，img:'img2.jpg '，showHehe:true }，{ id:2，name:'7天C#从入门到自杀，text: '到底是人性的扭曲啊，还是道德的沦丧啊。祖国的花朵为何自杀，价格：20，img: '././static/img2.jpg '，showHehe:false }] })，methods : { XYZ(bid){ alert(bid)；} } }/脚本在子页面中可以这么搞

脚本导出默认{道具：['书'，'消息']，创建(){控制台.日志(这个.书。姓名)；}，methods:{ select(id){ this .$emit('abc '，id)；},明细（出价){这个$路由器。推送(`/admin/Details/$ { bid } `)；} } }/脚本而其中的$emit是可以调用父页面的方法的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。