一个轻量级的状态管理库，类似于pinia、vuex，适用于微信小程序。轻量使用，无需复杂的操作。

安装

npm install mpstore-next

使用

1、创建一个userStore文件，并初始化一个store对象：

import { defineStore } from 'mpstore-next'

export const useUserStore = defineStore("user",{
  state:() => ({
    userInfo:{
      name: "王五"
    },
    userToken:"",
  }),
  getters:{
    userName(state){
      return "UserName:" + state.userInfo.name
    }
  },
  actions:{
    changeName(name){
      this.userInfo.name = name
    }
  }
})

2、使用内置封装在Component中使用Store

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

defineComponent({
  stores: { store: userStore },
  data: {},
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})

或者原生方式在Component中使用Store

import { useUserStore } from 'userStore'

const userStore = useUserStore()
let closeStore = null

Component({
  data: {},
  lifetimes: {
    attached: function () {
      closeStore = userStore.$update((data) => this.setData(data))
    },
    detached: function () {
      closeStore && closeStore()
    }
  },
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})

同样，Page中使用同上Component

import { definePage } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

definePage({
  stores: { store: userStore },
  data: {},
  changeName(){
    userStore.changeName("张三")
  }
})

3、在wxml中使用store数据

<view>
  <text>Getter数据：{{ $getter.userName }}</text>
  <text>State数据: {{ $state.userToken }}</text>
  <button bindtap="changeName">更新store数据</button>
</view>

4、更新store数据

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

defineComponent({
  stores: { store: userStore },
  data: {},
  methods: {
    changeName(){
      //直接更新store数据
      userStore.userInfo.name = "张三"
      userStore.userToken = "123456"
    },
    changeWithPatch(){
      //使用patch更新store数据
      userStore.$patch({
        userInfo:{
          name:"张三"
        },
        userToken:"123456"
      })
    }
  }
})

5、多个Store使用，区分Store命名空间，使用storePart: true开启store隔离

注：以defineStore中的key作为隔离名称

import { defineStore } from 'mpstore-next'

export const useThemeStore = defineStore("theme",{
  state:() => ({
    theme: "light",
  }),
})

使用多个store

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'
import { useThemeStore } from 'themeStore'

const userStore = useUserStore()
const themeStore = useThemeStore()

defineComponent({
  stores: {
    storePart: true, //开启store隔离
    store: [ userStore, themeStore ]
  },
  data: {},
})

在wxml中使用不同命名空间的store数据

<view>
  <text>用户名：{{ user.$state.userInfo.name }}</text>
  <text>主题: {{ theme.$state.theme }}</text>
</view>

6、按需使用属性

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

defineComponent({
  stores: { 
    store: userStore,
    useProp: ['userName']
  },
  data: {},
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})

多个store，按需使用属性

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'
import { useThemeStore } from 'themeStore'

const userStore = useUserStore()
const themeStore = useThemeStore()

defineComponent({
  stores: {
    usePart: true, //开启store隔离
    config: [
      {
        store: userStore,
        useProp: ['userName']		
      },
      {
        store: themeStore,
        useProp: ['theme']
      }
    ]
  },
  data: {},
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})

8、store数据监听，支持state和getter的变化监听

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()
let stopWatch = null

defineComponent({
  stores: { userStore },
  data: {},
  lifetimes: {
    attached: function () {
      stopWatch = userStore.$watch(() => userStore.name, (newValue,oldValue) => {
        console.log("watch newValue = ", newValue, "oldValue = ", oldValue)
      })
    },
    detached: function () {
      stopWatch && stopWatch()
    }
  },
  methods: {
    changeName(){
      userStore.changeName("张三")
      // 点击之后订阅会打印出数据
      // watch newValue = 张三 oldValue = 王五
    }
  }
})

8、订阅数据变化

import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()
let closeSubscribe = null

defineComponent({
  stores: { userStore },
  data: {},
  lifetimes: {
    attached: function () {
      closeSubscribe = userStore.$subscribe((data) => {
        console.log("subscribe",data)
      })
    },
    detached: function () {
      closeSubscribe && closeSubscribe()
    }
  },
  methods: {
    changeName(){
      userStore.changeName("张三")
      // 点击之后订阅会打印出数据
      // subscribe { "userInfo.name": "张三" }
    }
  }
})

注：由于微信小程序对Proxy的兼容性，目前仅支持微信小程序版本号2.11.0及以上的版本。