taro 全局变量四种方法
Author:zhoulujun Date:
taro全局变量使用上,无非设置taro实体上(类似windows或者window.app = new Vue()),第二就是页面url参数上(但是taro的小程序并没有router 像 react或者vue router方便,第三个就是设置在redux store 里面。
使用getApp()方法
在taro中,使用Taro.getApp(),能获取到App的实例,可以通过这种办法,把全局变量写入App实例中。要在构造函数中创建,或者在函数外定义,如果在componentDidMount()函数中定义无效。
// app.jsx 定义
class App extends Component {
constructor() {
super();
// 构造函数内定义一个a
this.a = "is a";
}
// 函数外定义一个b
b="is b";
...
}
// index.jsx 获取
const app = Taro.getApp();
console.log(app.a) // is a
console.log(app.b) // is b
使用config下的env
配置完,如果是开监听模式,请关闭监听,重新监听并编译,否则无效
在config目录下编辑。在文件中dev.js,配置env。在这里,官方给出的NODE_ENV值为 '"development"',使用单引号,再使用双引号。但是自己在如上所述的环境下,直接使用单引号或者双引号可以直接访问。
// dev.js 定义
...
env: {
NODE_ENV: '"development"',
AAA: "is AAA" // 定义一个AAA
},
...
// index.jxs 获取使用
...
console.log(process.env.AAA) // is AAA
...
在config文件下的三个文件中均能配置env,下面的 defineConstants 也一样。
使用config下的defineConstants
这个配置下的定义可以直接使用,所以一定要避免重复定义变量,要起作用,也要重启编译。
// dev.js 定义
defineConstants:{
HOST: "https://demo.cn/"
}
// index.jsx 获取并使用
...
// 直接使用变量名
console.log(HOST) // https://demo.cn/
...
使用引入的方式import Golbal from path/golbal
这种方法就是基础常规的方法,网上有很多关于此类的写法及其作用。
为了好管理,将全局变量写在一个文件中,统一管理。即在 src 目录下创建一个任意名字文件夹,例如 config 文件夹
在 config 文件夹下创建一个任意的名字的文件,例如golbal.jsx
将数据变量 exports 出来。
使用的时候,使用 import 就可以了
使用redux
import Taro, { FC, useState, useEffect } from '@tarojs/taro'
const Page: FC = () => {
const [ userList, setUserList ] = useState<userList>([])
const [ hasMore, setHasMore ] = useState<boolean>(true)
useEffect(() => {
getFollowedList()
}, [])
}
function mapStateToProps(state) {
const {user} = state
return {user}
}
@connect(mapStateToProps)
class Index extends Component<IProps, PageState> {}
这个也是一个好办法
转载本站文章《taro 全局变量四种方法》,
请注明出处:https://www.zhoulujun.cn/html/webfront/AppDev/taro/8710.html