dva的一些小知识(傻瓜教程)

734 阅读1分钟

去除dva地址栏的#

  1. 第一步

npm install --save history ==> npm下载方式

yarn add history --save ==> yarn下载方式

  1. 第二步
    在入口的src/ index.js中 引入
    import {createBrowserHistory as createHistory} from "history"
  1. 第三步
    在dva初始化内容 src/index.js入口文件中  将app修改为:
    const app =dva({history:createHistory()});

这样的话地址栏的#就会被去掉了

dva的model用法

     namespace:''   用于定义你该model文件的名字
    state:{}           用于存储数据(类似于react的state) 
    subscriptions:{}   用于调用effects中的函数
    effects:{}         用于调用reducers中的函数
    reducers:{}        用于修改state中的数据

例子:

上图中subscriptions的一个init函数中通过dispatch调用引入的函数,再通过effect使用call调用引入的接口函数,再使用put调用并传递参数type(这里的type是reducers里的函数名)和payload(这就是一个简单的参数名可以随意更改,对应的是上图例子中save的action),最后reducers修改state方法的话跟react是一样的。

dva的alias(别名)配置

使用dva会发现通过 ../../components/table 这样引入的方法比较麻烦并且容易出错 按照下面的方法进行修改就可以直接使用 @/components/table 进行引入

  1. 将文件目录下的配置文件.webpackrc 改为JS文件 .webpackrc.js
  2. 在文件下引入path import path from 'path'
  3. module.exports = { alias: { "@": path.resolve(__dirname, "./", "src") } };

做完这三步然后就可以像VUE一样引入文件啦

结尾:第一次发表可能有点羞涩= =.