redux vuex_vuex插件以运行redux-saga

redux vuex

vuex-coolstory (vuex-coolstory)

redux-saga is an awesome library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) easier and better.

redux-saga是一个很棒的库，旨在使副作用(即，诸如数据获取之类的异步事物和诸如访问浏览器缓存之类的不纯之物)更加容易和更好。

While originally targetting Redux, redux-saga is actually not strictly tied to redux and do not rely on any internals of it's implementation. Actually redux-saga could be used with Vuex with put effect commiting mutations

虽然最初以Redux为目标，但redux-saga实际上并不严格地与redux绑定，并且不依赖于其实现的任何内部要素。 实际上redux-saga可以与Vuex一起使用，并具有put效果提交突变

This library wraps redux-saga so it can be used as Vuex plugin. It's external interface is similar to middleware provided by redux-saga.

该库包装了redux-saga，因此可以用作Vuex插件。 它的外部接口类似于redux-saga提供的中间件。

与vuex-redux-saga的区别 (Differences from vuex-redux-saga)

vuex-redux-saga not work with latest redux-saga, uses subcribe to commits hook as redux-saga action channel, and looks like abandoned. This package support latest version of redux-saga, plus also have mapSagaActions() function for your components. To send actions to saga directly, you can use store.sagaDispatch function. store.sagaDispatch is similar to vuex store.dispacth function.

vuex-redux-saga无法与最新的redux-saga一起使用，使用预订将钩子提交为redux-saga动作通道，并且看上去已被放弃。 该软件包支持最新版本的redux-saga，此外还为您的组件提供mapSagaActions()函数。 要将动作直接发送到saga，可以使用store.sagaDispatch函数。 store.sagaDispatch与vuex store.dispacth函数类似。

安装 (Installation)

$ npm install --save vuex-coolstory redux-saga

用法 (Usage)

import Vue from 'vue';
import Vuex from 'vuex';
import { VuexSaga } from 'vuex-saga';
import { take, put, race, delay } from 'redux-saga/effects';

// simple saga
function* saga() {
    while (true) {
        const { newItem, timer } = yield race({
            newItem: take('addItem'),
            timer: delay(3000)
        });
        if (timer) {
            yield put({
                type: 'appendItem',
                item: 'TIMER'
            });
        } else if (newItem) {
            yield put({
                type: 'appendItem',
                item: newItem.payload.item
            });
        }
    }
}

Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        items: []
    },
    plugins: [
        VuexSaga({
            sagas: [saga] // pass your sagas to plugin
        })
    ],
    mutations: {
        appendItem(state, { item }) {
            state.items = [...state.items, item];
        }
    }
});

API (API)

VuexSaga(options) (VuexSaga(options))

Creates a Vuex plugin and connects the Sagas to the Vuex Store

创建一个Vuex插件并将Sagas连接到Vuex商店

• options: Object - A list of options to pass to the plugin. Currently supported options are:

  options: Object -传递给插件的选项列表。 当前支持的选项是：

  • sagas : Array of saga generator functions.

    sagas ：传奇生成器函数数组。

  • sagaMonitor : SagaMonitor - see docs for createSagaMiddleware(options)

    sagaMonitor ：SagaMonitor-请参阅createSagaMiddleware(options)文档

  • onError : Function - see docs for createSagaMiddleware(options)

    onError ：功能-请参阅有关createSagaMiddleware(options)文档

  • context : Object - see docs for createSagaMiddleware(options)

    context ： createSagaMiddleware(options)有关createSagaMiddleware(options)文档createSagaMiddleware(options)

  • effectMiddlewares : Function[] - see docs for createSagaMiddleware(options)

    effectMiddlewares ：Function []-请参阅有关createSagaMiddleware(options)文档

mapSagaActions(args) (mapSagaActions(args))

Similar to mapActions or mapMutations. See usage in examples/simple/src/app.vue

类似于mapActions或mapMutations 。 请参阅examples/simple/src/app.vue

运行示例 (Run example)

npm i
cd examples/simple
webpack
# check dist/index.html

翻译自: https://vuejsexamples.com/plugin-for-vuex-to-run-redux-saga/

redux vuex