详解如何更好的使用module vuex(2)

import Vue from 'vue' import App from './App' import router from './router' import store from './store/index' Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, store, render: h => h(App) })

引入store，将store注册到vue的实例上面，这样对应模块的数据基本格式是这样，接下来在看看页面中怎么调用的吧。

页面使用store数据  列表页展示

<template> <div> <router-link to='https://www.jb51.net/'> 首页home</router-link><br/> 这是列表页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的流程图，单向数据流连通起来就可以形成一个完美的闭环。 没有太多文采，只想用最近单易懂的语言描述自己的理解，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章: