一、什么时候使用Vuex
-
如果应用比较简单，就不需要使用Vuex，直接使用父子组件传值及及它传值方式即可，使用Vuex就要额外的引入vuex的框架，可能是繁琐冗余的
-
如果需要构建一个中大型单页应用，就可以使用vuex更好地在组件外部管理状态
二、 Vuex 是什么？
-
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
-
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
三、Vuex的五个核心概念
1. state: 存储公共数据
2. mutations: 不能包含异步操作
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
mutation的方法中有两个参数，第一个是state,第二个是参数
mutations: {
方法名(state,参数){
state.属性 = 参数
}
}
在组件中提交mutations的方法： this.$store.commit("方法名",参数)
***** state中的数据是响应式的，数据改变，相关视图会重新渲染
3. actions:
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。(action不能直接更改state数据)
Action 可以包含任意异步操作。
总结一下：
- mutation不能有异步操作，而action可以有异步操作
- mutation可以直接更改数据，而action只能通过提交mutation,通过mutation的方法来改变数据
- 实际通过组件改变数据时，如果没有异步操作，可以直接提交mutation,如果有异步操作，必须派发action,通过action提交mutation来更改数据
4. getters: 就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算
实例
A组件实现的需求：
- 读取store中的公共数据
- 单击按钮时，通过提交mutation来更改store中的数据
- 在组件初始化时，通过ajax请求获取公共数据
- 遍历显示所有成绩>90的分数
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<com-a></com-a>
<hr>
<com-b></com-b>
</div>
<script src="./js/vue.js"></script>
<script src="./js/vuex.js"></script>
<script>
//定义状态管理仓库: store
const store = new Vuex.Store({
state: {
msg: '公有的数据',
score: [35,78,90,98,89,100],
goodsList: []
},
actions:{
//第一个参数是context,第二个是数据(payload载荷)
getGoodsList(ctx, type){
console.log(ctx,type);
//用定时器模拟异步请求
setTimeout(()=>{
let data = [
{
"id": 1,
"goodsName": "红米"
},
{
"id": 3,
"goodsName": "小米"
}
]
//通过提交mutation来改变数据
ctx.commit("changeList",data)
},5000)
}
},
mutations: {
changeMsg(state,newMsg){
// console.log('state',state);
// console.log('newMsg',newMsg);
state.msg = newMsg
},
changeList(state,data){
state.goodsList = data
}
},
// 类似computed
getters: {
goodScore(state){
return state.score.filter(item=>item>=90)
}
}
})
// 定义两个组件
const ComA = {
template: `
<div class="box box1">
组件A的内容
<hr>
<button @click="send">通过A组件修改公有数据</button>----{{$store.state.msg}}
<ul v-if="$store.getters.goodScore.length">
<li v-for="(item,index) in $store.getters.goodScore">{{item}}</li>
</ul>
</div>
`,
methods: {
send() {
// 通过commit()提交mutations，来改变state的数据
this.$store.commit("changeMsg",'改变过的msg')
}
},
created(){
//通过dispatch派发action,action中有异步请求
this.$store.dispatch("changeList",'book')
},
}
const ComB = {
template: `
<div class="box box2">
组件B的内容---{{$store.state.msg}}
<ul v-if="$store.state.goodsList.length">
<li v-for="(item,index) in $store.state.goodsList">{{item.goodsName}}</li>
</ul>
</div>
`
}
var vm = new Vue({
el: '#app',
data: {
},
// 注册store
store: store,
methods: {},
components: { ComA, ComB }
});
</script>
</body>
</html>
网友评论