亚马逊网站建设的目的,北京网站建设方案飞沐,wordpress主题取消,网站的搜索功能上周末看Vuex源码#xff0c;突发灵感#xff0c;为什么都是Vuex啊。 于是蛋疼一下午写了一个插件来帮助Vue可以使用Redux
Gayhub Url
Vue-with-Redux
这是一个用于帮助Vue使用Redux管理状态的插件。Redux是一个非常流行的状态管理工具。vue-with-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.gitnpm installnpm run serveUsage
需要像下面这样改造你的入口文件 // 有可能是你的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的组件例子: templatedivbutton clickclickHandler1Action Object/buttonbutton clickclickHandler2Sync Action/buttonbutton clickclickHandler3Async Action/buttonp{{reduce.count}}/p/div/templatescriptimport { 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更多专业前端知识请上
【猿2048】www.mk2048.com
