taro+dva的实践-白红宇

先贴上文档链接

taro:

dva:

taro的安装官网说的很详细，不再赘述

安装redux：

cnpm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger复制代码

安装dva:

cnpm install --save dva-core dva-loading复制代码

dva配置文件: /src/utils/dva.ts

import { create } from 'dva-core';import { createLogger } from 'redux-logger';import createLoading from 'dva-loading';let applet storelet dispatchlet registeredfunction createApp(opt) {  // redux日志  opt.onAction = [createLogger()]  app = create(opt)  app.use(createLoading({}))  if (!registered) opt.models.forEach(model => app.model(model))  registered = true  app.start()  store = app._store  app.getStore = () => store  app.use({    onError(err) {      console.log(err)    },  })  dispatch = store.dispatch  app.dispatch = dispatch  return app}export default {  createApp,  getDispatch() {    return app.dispatch  }}复制代码

配置dvaApp的models: /src/models/index.ts，后面各个page的models都需要在这里"注册"一下

import index from '../pages/index/model'export default [    index]复制代码

引入dva：/src/app.tsx，其中componentDidMount的生命周期函数大家可以自己配置，不用参考

import Taro, { Component, Config } from '@tarojs/taro'import Index from './pages/index'import "@tarojs/async-await";import { Provider } from "@tarojs/redux";import dva from './utils/dva'import models from './models';import { globalData } from "./utils/common";import './app.less'// 如果需要在 h5 环境中开启 React Devtools// 取消以下注释：// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {//   require('nerv-devtools')// }const dvaApp = dva.createApp({  initialState: {},  models: models,});const store = dvaApp.getStore();   //  getStore是一个函数！！！要执行！！！class App extends Component {  config: Config = {    pages: [      'pages/index/index'    ],    window: {      backgroundTextStyle: 'light',      navigationBarBackgroundColor: '#fff',      navigationBarTitleText: 'WeChat',      navigationBarTextStyle: 'black'    }  }  async componentDidMount () {    // 获取参数  涉及到globalData    const referrerInfo = this.$router.params.referrerInfo;    const query = this.$router.params.query;    !globalData.extraData && (globalData.extraData = {});    if (referrerInfo && referrerInfo.extraData) {      globalData.extraData = referrerInfo.extraData;    }    if (query) {      globalData.extraData = {        ...globalData.extraData,        ...query      };  }}  componentDidShow () {}  componentDidHide () {}  componentDidCatchError () {}  // 在 App 类中的 render() 函数没有实际作用  // 请勿修改此函数  render () {    return (      
            
           
              )  }}Taro.render(
    , document.getElementById('app'))复制代码

至此taro+dva就配置完毕了，具体models是放在每个page的文件目录下还是统一放在单个文件目录下可根据自己习惯