mpstore-next/README.md

一个轻量级的状态管理库，类似于`pinia`、`vuex`，适用于微信小程序。

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

### 安装
```shell
npm install mpstore-next
```
### 使用

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

```javascript
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
```javascript
import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

defineComponent({
  stores: { store: userStore },
  data: {},
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})
```
或者原生方式在`Component`中使用Store
```javascript
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`
```javascript
import { definePage } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

definePage({
  stores: { store: userStore },
  data: {},
  changeName(){
    userStore.changeName("张三")
  }
})
 ```
3、在wxml中使用store数据
```html
<view>
  <text>Getter数据：{{ $getter.userName }}</text>
  <text>State数据: {{ $state.userToken }}</text>
  <button bindtap="changeName">更新store数据</button>
</view>
```
4、更新store数据
```javascript
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`作为隔离名称

```javascript
import { defineStore } from 'mpstore-next'

export const useThemeStore = defineStore("theme",{
  state:() => ({
    theme: "light",
  }),
})
```
使用多个store
```javascript
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数据
```html
<view>
  <text>用户名：{{ user.$state.userInfo.name }}</text>
  <text>主题: {{ theme.$state.theme }}</text>
</view>
```
6、按需使用属性
```javascript
import { defineComponent } from 'mpstore-next'
import { useUserStore } from 'userStore'

const userStore = useUserStore()

defineComponent({
  stores: { 
    store: userStore,
    useProp: ['userName']
  },
  data: {},
  methods: {
    changeName(){
      userStore.changeName("张三")
    }
  }
})
```
多个store，按需使用属性
```javascript
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的变化监听
```javascript
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、订阅数据变化
```javascript
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`及以上的版本。