vuex四要素与函数柯里化的使用介绍

1.前言

vuex是vue中的全局状态管理解决方案,不同组件间通过vuex共享数据来实时的操作数据,它的存储是基于内存的,所以如果是常驻的需求,就需要使用Web存储的解决方案。vuex由State、Getter、Muation、Action四大要素组成。

2.State

State代表Vuex中的数据源,数据和视图呈现响应式的特性。我们也可以通过辅助函数mapState来快速的引入state属性

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        id:1
    }
})
new Vue({
    store,
  render: h => h(App),
}).$mount('#app')

<template>
  <div id="app">
    <h1>{{ $store.state.id}}</h1>
    <h2>{{ id }}</h2>
    <vuex></vuex>
  </div>
</template>

import { mapState } from 'vuex'
import vuex from '@/components/vuex'

export default {
  name: 'app',
  computed: {
    ...mapState({
               id: state => parseInt(state.id) + 1,
    }),
  },
  components: {
    'vuex': vuex
  },
  methods: {
  
  }
}

3.Getter

多个文件引入同一个方法时,为了避免多个文件重复编写同一个方法,我们可以在全局定义一个共享方法,然后多个文件直接引入就可以共享这个方法。Vue中提供了类似的机制Getter,多个组件无需编写重复的获取State的方法,直接通过Getter方式获取数据。和State一样,Vue提供了其辅助函数mapGetters。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        id:1
    },
    getters: {
        validNum: state => {
            return parseInt(state.id) === 1 ? state.id : 'invalid'
        }
    }
})
new Vue({
    store,
  render: h => h(App),
}).$mount('#app')
<template>
  <div id="app">
    <h1>{{ id }}</h1>
    <vuex></vuex>
  </div>
</template>

import { mapGetters } from 'vuex'
import vuex from '@/components/vuex'

export default {
  name: 'app',
  computed: {
    ...mapGetters({'id':'validNum'}),
  },
  components: {
    'vuex': vuex
  },
  methods: {
    dispatch: function(){
  
  }
}

4.Muation

对于state的修改,可以直接通过store对象修改其属性。官方提供了优雅的接口Muation,对于state属性的修改统一的封装在muation中,通过commit来提交muation,其辅助函数为mapMuation。需要注意的是muation操作必须是同步函数,这样才能保证数据的原子性。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        id:1
    },
    mutations: {
        plus (state, payload) {
            state.id += payload.id
        }
    }
})
new Vue({
    store,
  render: h => h(App),
}).$mount('#app')
<template>
  <div id="app">
    <h1>{{ id }}</h1>
    <button @click="commit">plus</button>
    <vuex></vuex>
  </div>
</template>

import { mapMutations, mapState } from 'vuex'
import vuex from '@/components/vuex'

export default {
  name: 'app',
  computed: {
    ...mapMutations(['plus']),
    ...mapState(['id'])
  },
  components: {
    'vuex': vuex
  },
  methods: {
    commit: function(){
       this.$store.commit('plus', {id:1});
    }
  }
}

5.Action

Action是对muation操作进行二次封装,唯一不同的是它支持异步操作,其辅助函数为mapActions。

import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        id:1
    },
    mutations: {
        plus (state, payload) {
            state.id += payload.id
        }
    },
    actions: {
        plus ({ commit }) {
            commit('plus', {id:1})
        }
    }
})
new Vue({
    store,
  render: h => h(App),
}).$mount('#app')
<template>
  <div id="app">
    <h1>{{ id }}</h1>
    <button @click="commit">plus</button>
    <vuex></vuex>
  </div>
</template>
import { mapActions, mapState } from 'vuex'
import vuex from '@/components/vuex'

export default {
  name: 'app',
  computed: {
    ...mapActions(['plus']),
    ...mapState(['id'])
  },
  components: {
    'vuex': vuex
  },
  methods: {
    commit: function(){
       this.$store.dispatch('plus');
    }
  }
}

6.函数柯里化

在vuex官方的例子中,很多地方都出现了多个箭头函数的连续使用,其本质则是函数柯里化的箭头函数表示。函数柯里化是指:将一个方法中的多个参数,退化成一个参数。其实现大多为函数堆栈返回第N个参数相关的函数方法,也就是迭代的返回回调函数。

    getters: {
        getIdBy: (state) => (id) => {
            return state.ids.find(state=>state.id === id)
        }
    }
   function add(x, y) {
       return x + y;
   }
   function curryingAdd(x) {
       return function (y) {
           return x + y;
       }
   }
   curryingAdd(1)(2);
   let a = (add) => (y) => {
       return add(3,y);
   }
   console.log(a(add,2));

7.参考

官方文档

https://vuex.vuejs.org/zh/
如无特殊说明,文章均为本站原创,转载请注明出处。如发现有什么不对的地方,希望得到您的指点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注