小程序中wepy-redux的使用以及存储全局变量

1. wepy-redux的使用

wepy-redux是wepy框架中的一个插件，它可以帮助我们将redux和wepy框架结合起来使用，便于开发者更方便地管理应用状态。下面我们来看一下如何使用wepy-redux。

1.1 安装wepy-redux

首先，我们需要在终端中进入我们的项目文件夹，然后使用npm或yarn来安装wepy-redux。在终端中输入以下命令：

npm install wepy-redux

//或者
yarn add wepy-redux

1.2 在app.wpy中使用wepy-redux

接下来，在我们的app.wpy文件中引入wepy-redux，并使用它提供的方法来将store注入到我们的应用中。在app.wpy中添加以下代码：

import wepy from 'wepy'

import { Provider } from 'wepy-redux'
import store from './store'
export default class extends wepy.app {
  config = {
    ...
  }
  //通过Provider注入store
  onLaunch() {
    this.use('requestfix')
    this.$store = store
  }
  ...
}

1.3 创建store

wepy-redux中的store与redux中的store类似，都由多个reducer组成，用于管理应用中的状态。下面我们来创建一个简单的store来管理我们的应用状态。在store文件夹下创建一个index.js文件，然后添加以下代码：

import { createStore, applyMiddleware } from 'redux'

import thunk from 'redux-thunk'
import rootReducer from '../reducers'
export default createStore(rootReducer, applyMiddleware(thunk))

以上代码引入了redux中的createStore和applyMiddleware方法，然后创建了一个store，并将redux-thunk中间件用于处理异步操作。

1.4 创建reducer

在redux中，reducer是用于控制状态变化的函数。下面我们来创建一个简单的reducer来管理我们的应用状态。在reducers文件夹下创建一个index.js文件，然后添加以下代码：

import { combineReducers } from 'redux'

import counter from './counter'
export default combineReducers({
  counter
})

以上代码将counter reducer合并成一个reducer，并导出。

接着，在reducers文件夹下创建一个counter.js文件，然后添加以下代码：

const initialState = {

  count: 0
}
export default function counter(state = initialState, action) {
  switch(action.type) {
    case 'INCREMENT':
      return {
        count: state.count + 1
      }
    case 'DECREMENT':
      return {
        count: state.count - 1
      }
    default:
      return state
  }
}

以上代码定义了一个初始状态，并创建了一个reducer，用于处理INCREMENT和DECREMENT两种操作。

2. 存储全局变量

在wepy中，我们可以使用组件间通信来共享数据。但是，在某些情况下，我们可能需要将数据存储到全局变量中，以便在整个应用中进行访问。下面我们来看一下如何在wepy中存储全局变量。

2.1 使用globalData

wepy中提供了一个全局变量globalData，我们可以将需要存储的值存储在其中。例如，在app.wpy文件中添加以下代码：

export default class extends wepy.app {

  config = {
    ...
  }
  data = {
    ...
  }
  globalData = {
    userInfo: null
  }
  ...
}

以上代码将一个名为userInfo的变量存储在了globalData中，并初始化为null。

2.2 使用Mixin

使用Mixin也是一种存储全局变量的方法。在wepy中，我们可以使用Mixin来将一个公共方法或数据挂载到所有组件中。下面我们来看一下如何使用Mixin来存储全局变量。首先，我们需要在src目录下创建一个mixins.js文件，然后添加以下代码：

export default class extends wepy.mixin {

  data = {
    ...
  }
  methods = {
    ...
  }
  onLoad() {
    //在onLoad生命周期中更改globalData的值
    this.$parent.globalData.userInfo = '张三'
  }
}

以上代码定义了一个Mixin，其中在onLoad生命周期中将用户信息存储在了globalData中。我们在需要访问这个数据的组件中，可以使用this.$parent.globalData.userInfo进行访问。

总的来说，wepy-redux可以帮助我们更方便地管理应用中的状态，而全局变量可以方便地存储全局变量，并在整个应用中进行访问。在实际开发中，我们可以根据自己的需要选择适当的方法。