How Vue uses Redux

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

npm install -save vue-with-redux

Run Demo

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

##Usage

You need to modify your entry file as follows:

 // 有可能是你的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')

The following is an actionCreate function:

 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: 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:

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

 export default {
 reduce
 };

Vue component example:

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!