coderwhy⽼师vue.jsb站视频教程笔记——第三部分
Vuex和axios两部分
⽬录
js合并两个数组06.（掌握）Vuex概念和作⽤解析
1.概念：Vuex是⼀个专门为Vue.js应⽤程序开发的状态管理模式。
2.理解：状态管理，这⾥的状态可以理解为⼀个变量的改变，能引起多个组件的改变，传统的⽅法可以通过bj = myObj⾃⼰进⾏状态管理，但是这不能响应式：
3.管理什么状态？
1）如果你做过⼤型开放，你⼀定遇到过多个状态，在多个界⾯间的共享问题。
2）⽐如⽤户的登录状态、⽤户名称、头像、地理位置信息等等。
3）⽐如商品的收藏、购物车中的物品等等。
4）这些状态信息，我们都可以放在统⼀的地⽅，对它进⾏保存和管理，⽽且它们还是响应式的（待会⼉我们就可以看到代码了，莫着急）。
07.（掌握）Vuex单界⾯到多界⾯状态管理切换（属性共享）
1.传统属性共享是⽗传⼦，利⽤props，如果层级复杂或者深，不⽅便传递，因此有了Vuex
2.如果不⽤props，就可以使⽤Vuex，步骤：
1）npm install vuex --save
2）src中新建store/index.js，并进⾏安装、创建和导出：
3）main.js导⼊
4）使⽤state中的值：<h2>{{$unt}}</h2>
08.（掌握）vuex-devtools和mutations(⽅法共享)
1.需求，通过vuex实现⽅法的共享，传统的⽅法<button @click="add">+<button>
2.vuex官⽅⽰意图：
3.vuex通过mutations⽅法实现共享：
1）在vuex/index.js的mutations中写公⽤⽅法：
2）在组件中调⽤⽅法（ this.$storemit('increment') ）：
09.（掌握）vuex-state单⼀状态树的理解
1.只建⼀个$store来管理所有的状态：
const store = new Vuex.Store({})
10.（掌握）vuex-getters的使⽤详解
1.五⼤属性之⼀——getters：相当于计算属性computed:
2.如，获取count的平⽅:
1)getters写计算属性（下图）  2）组件使⽤<p>{{$s.powerCount}}</p>
3.三个需求，打印年龄⼤于15岁的学⽣，并计算⼈数（getters内⽅法可以互相使⽤），并打印年龄⼤于age的学⽣1）state定义数组：
2）⼤于15岁的学⽣使⽤filter函数，计算⼈数调⽤getters内部⽅法（state,getters），需要传递参数的时候要返回function(){}:
App.vue:
<p>{{$15Stu}}</p>
<p>满⾜条件的学⽣的个数是：{{$15StuLength}}</p>
<p>打印满⾜年龄⼤于？的学⽣：
{{$AgeStu(3)}}</p>
11.（掌握）vuex-mutations的携带参数
1.Vuex的store的状态更新的唯⼀⽅式：提交Mutation
2.传递参数： this.$storemit('incrementStudent',student)
1）App.vue:
<button @click="addStudent({id:115,name:'tortoise',age:55})">addStudent</button>
...
addStudent(student){
this.$storemit('incrementStudent',student)
}
2)mutations⽅法的第⼆个参数可以传递数据:
12.（掌握）vuex-mutations的提交风格
App.vue两种风格的区别：
this.$storemit('incrementCount',unt是5
2.index.js中：
incrementCount(state,count){ unt += count },
this.$storemit({ type:"incrementCount", count  })1.count是对象{type: "incrementCount", count: 5}
2.index.js中：
incrementCount(state,payload){ unt += unt }
13.（掌握）vuex-数据的响应式原理
1.提前定义好的属性（如Info的name和age），在state⾥都是响应式的，如Info:{name:"kobe" , age:18}，修改的话可以直接响应式变化：updateInformation(state){  state.Info.name = "ws"  }
2.但是没有提前定义好的属性，不是响应式的，如对Info对象增加属性：
updateInformation(state){  state.Info['address'] = "洛杉矶"  }，Info对象会增加address属性，但是界⾯并不会响应式刷新
3.解决办法，利⽤Vue.set()的响应式⽅法进⾏添加（或Vue.delete()）：
14.（掌握）vuex-mutations的类型常量
（略）
15.（掌握）vuex-actions的使⽤详解
1.如果mutations的⽅法内部由异步操作，虽然视图会响应式刷新内容，但是devtools插件不会⽴即响应数据刷新：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。