From cc356e3b1b8fcb1931b7fbe4596fe02e4df8198a Mon Sep 17 00:00:00 2001 From: hsp_code Date: Mon, 13 May 2024 17:14:57 +0800 Subject: [PATCH] 1.0.0 --- . gitignore | 1 + README.md | 561 +++ demo/.eslintrc.js | 31 + demo/app.js | 19 + demo/app.json | 15 + demo/app.wxss | 10 + demo/pages/detail/index.js | 66 + demo/pages/detail/index.json | 3 + demo/pages/detail/index.wxml | 2 + demo/pages/detail/index.wxss | 1 + demo/pages/index/index.js | 49 + demo/pages/index/index.json | 4 + demo/pages/index/index.wxml | 1 + demo/pages/index/index.wxss | 62 + demo/project.config.json | 28 + demo/project.private.config.json | 7 + demo/sitemap.json | 7 + demo/utils/util.js | 19 + lib/index.js | 1 + package-lock.json | 6249 ++++++++++++++++++++++++++++++ package.json | 31 + src/index.js | 17 + src/reset.js | 47 + src/store.js | 109 + webpack.config.js | 30 + 25 files changed, 7370 insertions(+) create mode 100644 . gitignore create mode 100644 README.md create mode 100644 demo/.eslintrc.js create mode 100644 demo/app.js create mode 100644 demo/app.json create mode 100644 demo/app.wxss create mode 100644 demo/pages/detail/index.js create mode 100644 demo/pages/detail/index.json create mode 100644 demo/pages/detail/index.wxml create mode 100644 demo/pages/detail/index.wxss create mode 100644 demo/pages/index/index.js create mode 100644 demo/pages/index/index.json create mode 100644 demo/pages/index/index.wxml create mode 100644 demo/pages/index/index.wxss create mode 100644 demo/project.config.json create mode 100644 demo/project.private.config.json create mode 100644 demo/sitemap.json create mode 100644 demo/utils/util.js create mode 100644 lib/index.js create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 src/index.js create mode 100644 src/reset.js create mode 100644 src/store.js create mode 100644 webpack.config.js diff --git a/. gitignore b/. gitignore new file mode 100644 index 0000000..40b878d --- /dev/null +++ b/. gitignore @@ -0,0 +1 @@ +node_modules/ \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..7e94b75 --- /dev/null +++ b/README.md @@ -0,0 +1,561 @@ +# wxminishareddata + +[![NPM version](https://img.shields.io/npm/v/wxminishareddata.svg)](https://www.npmjs.com/package/wxminishareddata) +[![License](https://img.shields.io/npm/l/wxminishareddata.svg)](https://www.npmjs.com/package/wxminishareddata) + +一个基于原生小程序的 mini 轻量全局状态管理库,跨页面/组件数据共享渲染。 + +- 全局状态 data 支持所有 Page 和 Component。 +- 类似 Vuex 的使用 +- 适合原生小程序,即使后期引入,也只需增加几行代码。 + +## 更新日志 + +### 1.0.0 + +\[2023.5.\] `A`: 新增[debug 字段](#other),用于开启/关闭 setState 时的 console。 + +### 导航 + +- [全局状态开始](#start) + - [安装及引入](#start-1) + - [实例化](#state) + - [App 中注入](#start-3) + - [页面上使用](#start-4) + - [修改状态](#start-5) + - [修改状态注意事项](#start-6) +- [页面周期监听](#lisener) + - [全局分享](#share) +- [全局方法](#f) +- 性能优化 + - [局部状态模式](#part) + - [useProp](#useProp) +- [其他](#other) +- [non-writable 解决方案](#nonWritable) +- [Api 说明](#api) +- [总结及建议](#end) + +##
开始
+ +在开始前,你可以 clone 或下载本项目,用微信开发工具打开 demo 目录来查看效果。 + +###
1.安装及引入
+ +目前有两种引入方式: + +#### npm + +首先你需要 npm init 在项目目录下生成 package.json 后,再进行安装。 + +```cmd +npm init +npm install wxministore -S +``` + +然后在微信小程序右上角详情中勾选 `使用npm模块`。 + 接着选择左上角 工具-构建 npm。 +这样你就可以在项目中导入了。 + +```js +//app.js中 +import Store from "wxministore"; +//或者 const Store = require('wxministore'); +App({}); +``` + +#### clone + +如果不太熟悉 npm 没关系,你可以将本项目中 lib/store.js 复制到你的项目中,并在`app.js第一行`引入: + +```js +//app.js中 +import Store from "./util/store.js"; +//或者 const Store = require('./util/store.js'); +App({}); +``` + +###
2. 实例化一个全局状态 state
+ +Store 为构造函数,所以需要通过 new 关键字实例化,参数为 object 类型,下面我们初始化一个 state。 + +```js +let store = new Store({ + state: { + msg: "这是一个全局状态", + user: { + name: "李四", + }, + }, +}); +console.log(store.getState().msg); //这是一个全局状态 1.2.6+ +console.log(store.$state.msg); //这是一个全局状态 (不推荐) +App({}); +``` + +初始化完成,我们如需在 js 中获取状态,可使用 `store.getState()` 获取全局状态,`1.2.6+`版本强烈推荐此方式。 +store.\$state 也可获取,但不建议使用。 + +###
3.在 App 中注入 store
+ +这么做是为了在其他页面中使用 store。 + +```js +App({ + onLaunch: function () {}, + store: store, +}); +``` + +###
4.页面上使用
+ +在所有 wxml 中,可使用$state.x。 +其中$state 为全局状态的容器,里面包含了所有的全局状态。 + +```html +{{$state.user.name}}:{{$state.msg}} +``` + +显示为 李四:这是一个全局状态。 + +如果在 template 文件中使用,需在属性 data 中引用\$state + +```html + + + + +