美文网首页
微信小程序状态库(mini)

微信小程序状态库(mini)

作者: 双笙_ | 来源:发表于2020-09-22 17:26 被阅读0次

    现在日常开发中,小程序的开发框架有很多,uniapp,taro,mpvue等,都自带了状态库,而偏偏 写原生小程序就没有自带的状态库, 原生既方便又其他同事容易上手;所以自己写了一个库,一个文件即可~

    直接上gitee 源码: https://gitee.com/Rick_0/applet-state-library

    如何使用?

    下载 store-core.js 文件,

    store.js
       import { createStore } from './store-core';
          export const store = new createStore({
              state: { // 这里是仓库值
                  author:'rick',
                  arr:[]
              },
              dev:false,//打开会有自动 错误提示
              global:false,  //是否开启自动全局注入state, 开启全局后页面多了会影响性能,二十个页面内性能正常
              mutations: {// 这里参考vuex
                  changeAuthor(state){
                      state.author  = 'nancy';
                  },
                  s(state,val){
                      state.arr = val
                  }
              }
    })
    
    app.js
    //  2. 在app.js 中引入 store.js
        import { store } from './store'
          App({
              store,
              data: {}
          })
    
    

    在页面中

      要声明useStore  两种方式
    page({
      useStore:true, // 全部注入
      useStore:[  "变量名"   ]  // 按需引入 建议!!
    })
    
    this.$store.变量名
    
    <view>{{  $store.变量名  }}</view>
    

    如何修改状态?

    在页面 获取 app实例, app.store.$commit

     方法一:   getApp().store.$commit(" mutation方法 ", 值) =>>类似vueX
     方法二:   getApp().store.$commit(  {  变量: 值   }  )   =>>类似小程序setData
    

    相关文章

      网友评论

          本文标题:微信小程序状态库(mini)

          本文链接:https://www.haomeiwen.com/subject/bkxbyktx.html