This article mainly introduces how to use Redux with Vue. The content is quite good. I will share it with you now and give it as a reference.
Looking at the Vuex source code last weekend, I suddenly had an inspiration, why is it all Vuex?
So I wrote a plug-in all afternoon to help Vue use Redux
Gayhub Url
Vue-with-Redux
This is a plug-in to help Vue use Redux to manage state. Redux is a very popular state management tool. vue-with-redux provides you with a way to use Redux in the Vue environment. This time brings a different development experience.
Start
First you need to install vue-with-redux through the following command
1 | npm install -save vue-with-redux
|
Copy after login
Run Demo
1 2 3 | git clone https:
npm install
npm run serve
|
Copy after login
##Usage
You need to modify your entry file as follows:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | ...
import VuexRedux from & #39;vue-with-redux';
import { makeReduxStore } from & #39;vue-with-redux';
import reduces from & #39;YOUR-REDUCERS';
import middlewares from & #39;REDUX-MIDDLEWARES';
Vue.use(VuexRedux);
let store = makeReduxStore(reduces, [middlewares]);
new Vue({
store,
render: h => h(App)
}).$mount(& #39;#app')
|
Copy after login
The following is an actionCreate function:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | export function test() {
return {
type: & #39;TEST'
}
}
export function asyncTest() {
return (dispatch, getState) => {
setTimeout( () => {
console.log(& #39;New:', getState());
dispatch({type: & #39;TEST'});
console.log(& #39;Old', getState());
}, 100);
}
}
|
Copy after login
Note: You do not need to use redux-thunk, because Vue-with-Redux already provides support for asynchronous processing.
This is an example of a reducer:
1 2 3 4 5 6 7 8 9 10 11 12 13 | function reduce (state = { count: 0 }, action) {
switch (action.type) {
case & #39;TEST':
state.count++;
return state;
default :
return state;
}
}
export default {
reduce
};
|
Copy after login
Vue component example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 | <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 & #39;./../actions';
export default {
name: & #39;HelloWorld',
props: {
msg: String
},
data() {
return {
reduce: {}
}
},
methods: {
clickHandler1() {
this .dispatch({type: & #39;TEST'});
},
clickHandler2() {
this .dispatch(test());
},
clickHandler3() {
this .dispatch(asyncTest());
},
mapReduxState(state) {
return {
reduce: state.reduce
}
},
}
}
</script>
|
Copy after login
The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!
Related recommendations:
Introduction to vue routing interception and page jump setting methods
vue data cannot use arrows Problem analysis of functions
The above is the detailed content of How Vue uses Redux. For more information, please follow other related articles on the PHP Chinese website!