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