这是列表页list<br/>
<ul>
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li>
</ul>
<div>计算：</div>
<div>{{number}}</div>
<button @click='handleAdd()'>add</button>
</div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {
name: 'list',
data(){
return{}
},
computed:{
...mapGetters('listData',['List','number'])
},
methods:{
//方法一： ...mapActions('listData',['getListData','handleAdd']),
//方法二：
...mapActions({
getListData:"listData/getListData",
handleAdd:"listData/handleAdd"
})
},
mounted(){
this.getListData();
}}
</script>
<style></style>
引入import { mapGetters, mapActions } from ‘vuex’ 辅助函数，在computed计算属性里面把对应页面的数据也就是列表页对应的列表页的store拿到List number，也可以认为是读取里面的数据，将数据映射到页面来，这样就拿到了响应的数据，methods里面是映射到页面的方法，比如getListData方法就是走接口请求过来的数据，当页面加载完后调用，也就是在mounted。handleAdd方法也是派发，在对应的actions里面可以看到。如果不用辅助函数，也就会用到dispatch，这里没在细讲
demo地址： https://github.com/cookie-zhang/vuex_Demo
六 总结
以上描述简单易懂，可以在项目中直接使用这种模块化管理数据的方式，总体来看就更好的理解vux的流程图，单向数据流连通起来就可以形成一个完美的闭环。 没有太多文采，只想用最近单易懂的语言描述自己的理解，希望对大家的学习有所帮助，也希望大家多多支持软件开发网。
