当前位置：首页>数据库>正文

前端vue使用redis vue使用redux

数据库2024-04-25 22:47:43

随着项目的日益增大，维护状态，成为了一件必须且比较繁琐的事情。出现了很多优秀了状态管理工具，

数据管理，组织state

让我们一起来看下，vue中使用vuex和react中使用redux有什么区别。

vuex

参考链接：https://vuex.vuejs.org/zh/

要想使用vuex，在你的项目目录下执行如下命令。

第一步：下载依赖包vuex npm install --save-dev vuex
第二步：引入依赖包 import Vue from 'vue'
第三步：使用Vue的use方法挂载vuex Vue.use(vuex)
第四步：创建store，创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
new.vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }});
第五步：根组件中注入store
** 创建根实例的时候注入store**

new Vue({
	    el:"#app",
	     store,
	     render:h=>h(<App />)
})

使用：

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    }
  }
})

组件内：

import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{
		count:0
    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    ...mapGetters({
       getternum:'docount'
    })
  },
  methods:{
    ...mapMutations({
      addnum:'SET_COUMT_ADD',
      reducenum:'SET_COUMT_REDUCE'
    }),
    ...mapActions({
      addmore:'ADD1000',
      reducemore:'REdUCE1000'
    }),
    add(){
	  this.addnum();
	  console.log(this)
	  this.count = this.counts;
      console.log(this.counts,'+1')
    },
    reduce(){
      this.reducenum()
	  this.count = this.counts;
      console.log(this.counts,'-1')
    },
    add1000(){
      this.addmore()
	  this.count = this.counts;
      console.log(this.counts,'+1000')
    },
    reduce1000(){
      this.reducemore()
	  this.count = this.counts;
      console.log(this.counts,'-1000')
    }
  },
  
  mounted(){
    console.log(this.counts,this.$store.state.count,111111111)
  }
}

redux使用

官方提供了react-redux的工具包用于绑定redux的store到react

第一步：下载依赖包redux npm install --save-dev redux react-redux
第二步：引入依赖包获取api import { applyMiddleware, compose, createStore } from 'redux'
创建store const store = createStore(reducer, preloadedState, composedEnhancers)
引入react-redux的store注入组件 import { Provider } from 'react-redux';
挂载store <Provider store={store}>

使用：

一个react-redux提供的高阶react组件，返回被注入state和action的组件

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

第一个参数

[mapStateToProps(state, [ownProps]): stateProps] (Function): 如果定义该参数，
    组件将会监听 Redux store 的变化。
    任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用。该回调函数必须返回一个纯对象，
    这个对象会与组件的 props 合并。如果你省略了这个参数，你的组件将不会监听 Redux store。
    如果指定了该回调函数中的第二个参数 ownProps，则该参数的值为传递到组件的 props，
    而且只要组件接收到新的 props，mapStateToProps 也会被调用
    （例如，当 props 接收到来自父组件一个小小的改动，
    那么你所使用的 ownProps 参数，mapStateToProps 都会被重新计算）

第二参数

[mapDispatchToProps(dispatch, [ownProps]): dispatchProps] (Object or Function): 
如果传递的是一个对象，那么每个定义在该对象的函数都将被当作 Redux action creator，
对象所定义的方法名将作为属性名；每个方法将返回一个新的函数，
函数中dispatch方法会将 action creator 的返回值作为参数执行。这些属性会被合并到组件的 props 中。

第三参数

[mergeProps(stateProps, dispatchProps, ownProps): props] (Function): 
如果指定了这个参数，
mapStateToProps() 与 mapDispatchToProps() 的执行结果和组件自身的 props 将传入到这个回调函数中。
该回调函数返回的对象将作为 props 传递到被包装的组件中。
你也许可以用这个回调函数，根据组件的 props 来筛选部分的 state 数据，
或者把 props 中的某个特定变量与 action creator 绑定在一起。
如果你省略这个参数，
默认情况下返回 Object.assign({}, ownProps, stateProps, dispatchProps) 的结果。

第四参数

[options] (Object) 如果指定这个参数，可以定制 connector 的行为

组件内使用方式：

//注入state到组件的props
 function mapStateToProps(state) {
      return { todos: state.todos }
 }

//action创建函数  bindActionCreators实现绑定为actions的属性返回
function mapDispatchToProps(dispatch) {
  return { actions: bindActionCreators(actionCreators, dispatch) }
}


export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(TodoApp)

PS：可以使用es7提案的@装饰器写法

安装模块支持@：babel-plugin-transform-decorators-legacy

配置babel：

{
    "plugins":[
        "transform-decorators-legacy"
    ]
}

使用：

import React from 'react'
import {render} from 'react-dom'
import {connect} from 'react-redux'
import {bindActionCreators} from 'redux'
import action from 'action.js'

@connect(
  state=>state.main,
  dispatch=>bindActionCreators(action,dispatch)
)
class App extends React.Component{
    render(){
        return <div>hello</div>
    }
}

欢迎star本人github：https://github.com/flyku

查看全文

https://www.xamrdz.com/database/6n71934708.html

数据管理，组织state

vuex

redux使用

使用：

相关文章：