Vue使用Redux的方法

来源：动视网责编：小采时间：2020-11-27 19:34:15

Vue使用Redux的方法

Vue使用Redux的方法:这篇文章主要介绍了让Vue也可以使用Redux的方法，内容挺不错的，现在分享给大家，也给大家做个参考。上周末看Vuex源码，突发灵感，为什么都是Vuex啊。于是蛋疼一下午写了一个插件来帮助Vue可以使用ReduxGayhub Url Vue-with-Redux这是一个用于帮助

推荐度：

点击下载本文 文档为doc格式

导读Vue使用Redux的方法:这篇文章主要介绍了让Vue也可以使用Redux的方法，内容挺不错的，现在分享给大家，也给大家做个参考。上周末看Vuex源码，突发灵感，为什么都是Vuex啊。于是蛋疼一下午写了一个插件来帮助Vue可以使用ReduxGayhub Url Vue-with-Redux这是一个用于帮助

这篇文章主要介绍了让Vue也可以使用Redux的方法，内容挺不错的，现在分享给大家，也给大家做个参考。

上周末看Vuex源码，突发灵感，为什么都是Vuex啊。

于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux

Gayhub Url

Vue-with-Redux

这是一个用于帮助Vue使用Redux管理状态的插件。Redux是一个非常流行的状态管理工具。vue-with-redux为大家提供一个可以在Vue环境下使用Redux的途径。这回带来不同的开发体验。

开始

首先你需要通过如下命令安装vue-with-redux

npm install -save vue-with-redux

运行Demo

 git clone https://github.com/ryouaki/vue-with-redux.git
 npm install
 npm run serve

Usage

需要像下面这样改造你的入口文件：

 // 有可能是你的entry.js文件
 ... // 这里是你引入的其它包
 import VuexRedux from 'vue-with-redux';
 import { makeReduxStore } from 'vue-with-redux';
 import reduces from 'YOUR-REDUCERS';
 import middlewares from 'REDUX-MIDDLEWARES';

 Vue.use(VuexRedux);

 let store = makeReduxStore(reduces, [middlewares]);

 new Vue({
 store,
 render: h => h(App)
 }).$mount('#app')

下面是一个actionCreate函数:

 export function test() {
 return {
 type: 'TEST'
 }
 }

 export function asyncTest() {
 return (dispatch, getState) => {
 setTimeout( () => {
 console.log('New:', getState());
 dispatch({type: 'TEST'});
 console.log('Old', getState());
 }, 100);
 }
 }

Note: 你并不需要使用redux-thunk，因为Vue-with-Redux已经提供了对异步处理的支持.

这是一个reducer的例子:

 function reduce (state = { count: 0 }, action) {
 switch(action.type) {
 case 'TEST':
 state.count++;
 return state;
 default:
 return state;
 }
 }

 export default {
 reduce
 };

Vue的组件例子:

 <template>
 <p>
 <button @click="clickHandler1">Action Object</button>
 <button @click="clickHandler2">Sync Action</button>
 <button @click="clickHandler3">Async Action</button>
 <p>{{reduce.count}}</p>
 </p>
 </template>

 <script>
 import { test, asyncTest } from './../actions';

 export default {
 name: 'HelloWorld',
 props: {
 msg: String
 },
 // 你必须在这里预先定义你订阅的Redux中的状态。否则编译模版会报错。
 data() {
 return {
 reduce: {}
 }
 },
 methods: {
 clickHandler1() {
 this.dispatch({type: 'TEST'});
 },
 clickHandler2() {
 this.dispatch(test());
 },
 clickHandler3() {
 this.dispatch(asyncTest());
 },
 // 你必须实现一个mapReduxState函数，用于告诉Vue-with-Redux你需要订阅哪些redux中的状态
 // [ state ] 参数就是redux状态树的根。
 mapReduxState(state) { 
 return {
 reduce: state.reduce
 }
 },
 }
 }
 </script>

Vue使用Redux的方法

推荐度：

点击下载本文 文档为doc格式

标签： VUE 使用方法 redux

热门焦点

Vue使用Redux的方法

Vue使用Redux的方法

Vue使用Redux的方法

最新推荐

猜你喜欢

热门推荐