准备:需要把微型框架放在根目录文件下链接如下
链接:https://pan.baidu.com/s/11B7Z2NaOsp7bGPXHMNOCOA 提取码: 4vup
在根目录文件下创建一个store文件里面放一个index.js文件
export default {
//类似于vue当中的state
data: {
num: 0 //共享的数据 只要一改变页面上就会刷新
}
}
定义好后在所需使用共享数据的路由的js文件下需要小小改动一下,如下图所示
先把store文件和create文件引入
import store from "../../store/index"
import create from "../../utils/create"
然后把Page内的对象剪切(内容太多此图片为选全)
剪切后为此图所示
然后把Page删除,然后如果时路由组件
如果是一般组件,create后跟Component在这里插入图片描述
以路由组件为例Page内传两个参数一个store为在store文件夹下index.js文件内定义的对象如下所示,另一个直接把之前剪切的Page内容粘贴上去
export default {
//类似于vue当中的state
data: {
num: 0 //共享的数据 只要一改变页面上就会刷新
}
}
使用共享数据
create.Page(store, {
use: ['num'], //use为一个数组,内填字符串名字为在共享数据中定义的名字,可与data中名字相重合
/**
* 页面的初始数据
*/
data: {
在wxm内使用
<!--此为使用data中的num -->
<view>{
{num}}</view>
<!--此为使用共享数据中的num -->
<view>{
{$.num}}</view>
在改变共享数据
this.store.data.num = 1