为你的Taro小程序引入Dva管理全局数据Model

对于前端开发来说数据的管理是相当重要的，本篇文章主要是讲在Taro中借助Dva实现对数据的统一管理，使得开发中提高效率。文章写的比较细致，读者可能需要有点耐心。文章前部分大概说一下整体结构，后半部分详细说一下具体实现。

一、大概实现

1、创建dva

我们在utils文件夹里面创建一个dva.js,dva.js里面的内容就是我们创建dva的具体过程(在后半部分详细介绍)

2、引入dva

首先我们引入Dva肯定是在页面加载之前，也就是程序刚刚启动的时候引入dva，因此我们在app.js引入dva

二、具体实现过程

1、创建dva具体实现过程（utils/dva.js）

// 引入 dva-core 里面的 create 用于创建dva
import { create } from 'dva-core';
import createLoading from 'dva-loading';

let app;
let store;
let dispatch;
//首先这是个创建函数 opt 就是我们创建时需要的参数，那么在哪里使用这个创建函数呢？？？肯定是在引入dva的时候就使用他哇
function createApp(opt){
    //下面两句不用说吧
  app = create(opt);
  app.use(createLoading({}));
  if(!global.registered){
     //这一句 model的遍历  app.model(model)就是将我们的model添加到dva里面
    opt.models.forEach(model => app.model(model));
  }
  global.registered = true;
  //dva 核心之一就是拿到store
  app.start();
  store = app._store;
  app.getStore = () => store;
  
  dispatch = store.dispatch;
  app.dispatch = dispatch;
  return app;
}
export default {
  createApp,
  getDispatch: () => {
    return app.dispatch;
  }
}

2、引入dva具体过程(app.js)

import { Component } from 'react'
import { Provider } from 'react-redux'
import 'taro-ui/dist/style/index.scss'
// 这个models 就是我们添加的model
import models from './models'
import dva from './utils/dva';
import './app.less'

const dvaApp = dva.createApp({
  onError(err) {
    // 在这里进行错误处理
    console.log(err);
  },
  initialState: {},
  // 这里我们将model 传进去了,create的时候有个model的forEach遍历，将model注入进去
  models
});
const store = dvaApp.getStore();

class App extends Component {

  componentDidMount() { }
  
  // this.props.children 是将要会渲染的页面
  render() {
    return (
    //dva核心之一就是store把store注入进去
      <Provider store={store}>
        {this.props.children}
      </Provider>
    )
  }
}

export default App

3、model文件夹

这个各个模块的model都要放在这个数组里面(各个模块从旁边的import from可以看出位置)

总结

一开始我们想要dva来管理我们的各个模块的数据，第一步就该想到要用store注入到全局,store要注入 必定要先创建dva，然后就想dva怎么创建model的呢？我们在utils同级文件下创建model文件夹,然后将我们自定义的model放到数组里面 导出之后在app.js文件里面导入import models from './models' 然后将model 放入dva.createApp作为参数，createApp里面的 opt.models.forEach(model => app.model(model));将数组里面的Model注入，这样就完成了项目启动的时候就能获取store从而获取每一个model啦，有什么问题欢迎评论区留言讨论。