小程序: uniapp + vue3 之 nx.$API

自己实现的一 nx.$API 语法糖系列
更新于: 2023-06-16 06:43:00

安装

# 基本工具集
yarn add @jswork/next-uniapp-kits
# 状态管理相关
yarn add @jswork/pinia-state-tree

配置1: NxAppKits

在 main.js 中引入即可

import '@jswork/next-uniapp-kits';

// init uniapp kits:
nx.UniappKits.create({ prefix: 'nuk' });

配置2: PiniaStateTree

import { createSSRApp, watch } from "vue";
import { createPinia } from "pinia";
import PiniaStateTree from "@jswork/pinia-state-tree";
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  const pinia = createPinia();

  pinia.use(PiniaStateTree);
  app.use(pinia);
  //...
}

使用

功能代码说明推荐使用指数(5)
nx.$use

一次性注入所有的 stores 到内存中，默认为 immdiate: true 模式

在一些要求较高的项目，特别是 store 比较多的场景，可以使用 immdiat: false 模式，动态加载 state

nx.$use(stores, { immdiate: true })
⭐️
nx.$get: 取得具体的 state
// 取得所有
nx.$get();
// 取得 counter 中的 count 的值
nx.$get('counter.count');
⭐️⭐️⭐️⭐️⭐️
nx.$set: 更新 state 值
// 设置单个
nx.$set('counter.count', 1);
// 多个
nx.$set({'counter.count': 1})
⭐️⭐️⭐️⭐️⭐️
nx.$query: 取得具体的 store
const userStore = nx.$query('user')
⭐️⭐️⭐️
nx.$call: 调用 store 里的 action
nx.$call('user.login', { username: 'afeiship'});
⭐️⭐️⭐️⭐️⭐️
nx.$map: mapState 增强
nx.$map([
	'counter.count',
	'user.profile.login:username'
])
⭐️⭐️⭐️⭐️⭐️
nx.$global: 全局对象管理
// 设值
nx.$global = {abc: 123}
// 取值
nx.$global
⭐️⭐️⭐️
nx.$local: 本地存储管理(同步)
nx.$local.set('key', 'value')
nx.$local.sets({k1: 'v1', k2: 123 })
nx.$local.gets()
nx.$local.clear()
nx.$local.del('k1')
⭐️⭐️⭐️⭐️⭐️
nx.$event: 全局事件管理
// attach event:
const res = nx.$event.on('abc', ()=>{
 console.log('event.abc')
});

// destroy:
res.destroy();
⭐️⭐️⭐️
nx.$env: 取得.env 值
// 取得所有可用的环境变量
nx.$env()
// 取得具体的
nx.$env('BASE_URL')
// 也可以是小写
nx.$env('img_url')
⭐️⭐️⭐️⭐️
nx.$page，与页面有关的
// 取得页面信息(url/route/options)
nx.$page();
⭐️⭐️⭐️⭐️⭐️

参考