每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：
Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。
state：存储状态。也就是变量； 简单来说就是存储数据的
getters：派生状态。也就是set、get中的get，有两个可选参数：state、getters分别可以获取state中的变量和其他的getters。外部调用方式：store.getters.personInfo()。就和vue的computed差不多；
mutations：提交状态修改。也就是set、get中的set，这是vuex中唯一修改state的方式，但不支持异步操作。第一个参数默认是state。外部调用方式：store.commit('SET_AGE', 18)。和vue中的methods类似。
actions：和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式：store.dispatch('nameAsyn')。
modules：store的子模块，内容就相当于是store的一个实例。调用方式和前面介绍的相似，只是要加上当前子模块名，如：store.a.getters.xxx()。
下面是一个简单的购物车案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vuex异步获取数据</title>
<script src="../vue.js"></script>
<script src="../vuex.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
<p>{{title}}</p>
<child></child>
</div>
<script type="text/template" id="child">
<div>
<table border="1" width="90%">
<thead>
<th>编号</th>
<th>商品名称</th>
<th>数量</th>
<th>价格</th>
<th>总计</th>
<th>操作</th>
</thead>
<tr v-for="(item,index) in goods">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td><button @click="add(index)">+</button><input type="text" v-model="item.num"><button @click="reduct(index)">-</button></td>
<td>{{item.price}}</td>
<td>{{item.goodsPrice}}</td>
<td><button @click="deletes(index)">删除</button></td>
</tr>
</table>
<div>总价{{totalPrice}}</div>
</div>
</script>
<script>
var store=new Vuex.Store({
state:{
goods:[]
},
getters:{
//获取每个商品的总价
totalPrice:state=>{
let total=0;
state.goods.forEach(item=>{
total+=item.price*item.num;
})
return total
},
//获取全部商品的总价
goodPrice(state){
let goods=state.goods;
goods.forEach(item=>{
item.goodsPrice=item.num*item.price
})
return goods;
}
},
mutations:{
//商品个数增加
add(state,index){
state.goods[index].num++;
},
//商品个数减少
reduct(state,index){
let num=state.goods[index].num;
if(num<=0){
state.goods[index].num=0
}else{
state.goods[index].num--;
}
},
//删除商品
deletes(state,index){
state.goods.splice(index,1)
},
//把异步请求的数赋值到state中
setData(state,param){
state.goods=param.goods
}
},
//异步获取数据 这里如果不调用的话,是不会发送请求的
actions:{
loadGoods(store){
axios.get('index.php').then(res=>{
store.commit('setData',{
goods:res.data
})
}).catch(error=>{
console.log(error)
})
}
}
})
var child={
template:'#child',
computed:{
totalPrice(){
return this.$store.getters.totalPrice;
},
goods(){
return this.$store.getters.goodPrice;
}
},
mounted(){
},
methods:{
add(index){
this.$store.commit('add',index)
},
reduct(index){
this.$store.commit('reduct',index)
},
deletes(index){
this.$store.commit('deletes',index)
}
}
}
new Vue({
el:'#app',
data:{
title:'hello vue'
},
store,
components:{
child
},
mounted(){
//调用store中的异步获取数据
this.$store.dispatch('loadGoods')
}
})
</script>
</body>
</html>后台数据，新建index.php
<?php $data=[ ['id'=>'0','name'=>'苹果','price'=>1000,'num'=>3], ['id'=>'1','name'=>'华为','price'=>2000,'num'=>4] ]; echo json_encode($data); ?>
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接