置顶 Vuex辅助函数

javascript 技术

JavaScript

2020-05-15 12:04:04

969

作者:黑夜男神

mapActions

将组件的 methods 映射为 store.dispatch 调用(需要先在根节点注入 store):

组件中引入:

import { mapActions } from 'vuex'

methods: {

    ...mapActions([

    'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
    // `mapActions` 也支持载荷:
    'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
    ]),

    ...mapActions({

        add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
    })

}

mapMutations

将组件中的 methods 映射为 store.commit 调用(需要在根节点注入store)。

组件中引入:

import { mapMutations } from 'vuex'
methods: {

    ...mapMutations([

    'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
    // `mapMutations` 也支持载荷:
    'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),

    ...mapMutations({

        add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })

}

在computed中使用mapState:

computed: {
  ...mapState(['a', 'b']),
}

就可以代替这段代码

computed: {
  a() {
    return this.$store.state.a
  },
  b() {
    return this.$store.state.b
  },
}

mapActions的使用

methods: {
  ...mapActions(['addA', 'addB']),
},

等价

methods: {
  addA(n) {
    this.$store.dispatch('addA', n)
  },
  addB(n) {
    this.$store.dispatch('addA', n)
  },
}

在computed中添加count的映射:

computed: {
  ...mapGetters(['count'])
}

等价于:

computed: {
  count() {
    return this.$store.getters.count
  }
}

index.js如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

const state={//要设置的全局访问的state对象
  showFooter: true,
  changableNum:0
  count: 0
  //要设置的初始属性值
};

const getters = {   //实时监听state值的变化(最新状态)
  isShow(state) {  //方法名随意,主要是来承载变化的showFooter的值
    return state.showFooter
  },
  getChangedNum(){  //方法名随意,主要是用来承载变化的changableNum的值
    return state.changebleNum
  }
};

const mutations = {
  show(state) {   //自定义改变state初始值的方法,这里面的参数除了state之外还可以再传额外的参数(变量或对象);
    state.showFooter = true;
  },
  hide(state) {  //同上
    state.showFooter = false;
  },
  newNum(state,sum){ //同上,这里面的参数除了state之外还传了需要增加的值sum
    state.changableNum+=sum;
  }
};

const actions = {
  hideFooter(context) {  //自定义触发mutations里函数的方法,context与store 实例具有相同方法和属性
    context.commit('hide');
  },
  showFooter(context) {  //同上注释
    context.commit('show');
  },
  getNewNum(context,num){   //同上注释,num为要变化的形参
    context.commit('newNum',num)
  }
};

const store = new Vuex.Store({
  state,
  getters,
  mutations
});

export default store;

vue提供了注入机制,就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue构造函数,然后在所有的子组件中this.$store 来指向store 对象。在index.js 中,我们用export store把store已经暴露出去了,然后直接在main.js中引入store并注入store即可。

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App'
import router from './router/router.js'
import store from './store'
import echarts from 'echarts'

Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(echarts)
Vue.prototype.$echarts = echarts

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

子组件中的computed属性是根据它的依赖自动更新的,所以只要store中的state发生变化,它就会自动变化,在一般情况下子组件中获取store中属性的方式如下:

<template>
 <div>
  <h3>Count is {{某属性}}</h3>
 </div>
</template>
<script>
 export default {
  computed: {
   count () {
    return this.$store.state.某属性
   }
  }
 }
</script>

通过computed属性可以获取到状态值,但是组件中每一个属性(如:count)都是函数,如果有10个,那么就要写10个函数,且重复写10遍return this.$store.state不是很方便。vue 提供了mapState函数,它把state直接映射到我们的组件中。

当然使用mapState之前要先引入它,它两种用法,或接受一个对象,或接受一个数组,其中使用对象的方式又有三种方法。

对象用法如下:

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
  // 下面这三种写法都可以
  computed: mapState({
   // 箭头函数可使代码更简练
    count: state => state.count,

    // 传字符串参数 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 为了能够使用 `this` 获取局部状态,必须使用常规函数
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })
 }
</script>

当映射的计算属性的名称与state的子节点名称相同时,我们也可以给 mapState传一个字符串数组。

<script>
 import {mapState} from "vuex";

 export default {
  computed: mapState([ // 数组
   "count"
  ])
 }
</script>

如果我们组件内部也有computed属性怎么办?它又不属于mapState,我们可以使用es6中的对象分割语法,把mapState函数生成的对象再分割成一个个的,就像最开始的时候我们一个一个罗列计算属性,有10个属性,我们就写10个函数。

<script>
 import {mapState} from "vuex";

 export default {
  computed: {
       ...mapState([
           "count"
       ]),
       getValue(){
           return 1;
        }
    }
 }
</script>

二、Module中使用mapState、mapGetters、mapActions辅助函数:

在src目录下建立store文件夹:

​

其中:

collection.js

//collection.js

const state={
  collects:['hi'],  //初始化一个colects数组
  field: '空天作战任务规划'
};

const getters={

};

const mutations={

};

const actions={

};

export default {
  namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名
  state,
  getters,
  mutations,
  actions
}

footerStatus.js:

//footerStatus.js

const state={   //要设置的全局访问的state对象
  name: 'beautiful',
  address: 'Hunan Changsha',
  school: '国防科大',
  showFooter: true,
  changableNum:0
  //要设置的初始属性值
};

const getters = {   //实时监听state值的变化(最新状态)

};

const mutations = {
  changeSchool(state, value){
    state.school = value;
  }
};

const actions = {
  _changeSchool(context, value){
    context.commit('changeSchool', value)
  }
};

export default {
  namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名
  state,
  getters,
  mutations,
  actions
}

index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import collection from './modules/collection'
import footerStatus from './modules/footerStatus'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    collection,
    footerStatus
  }
})

假如我们想在组件中使用module中的state、getters、mutations、actions,那该如何使用呢?

除了和普通store一样需要在main.js中注入store外,具体方法如下:

<template>
  <div>
    <p>name: {{name}}</p>
    <p>school: {{school}}</p>
    <p>address: {{address}}</p>
    <p>field: {{field}}</p>
    <p>arrList: {{arrList}}</p>
    <div><button @click="changeSchool()">改变值</button></div>
  </div>
</template>

<script>
  import {mapState, mapGetters} from 'vuex'
  export default {
    data(){
      return {
        use: 'vuex高级使用方法'
      }
    },
    computed: {
      ...mapState({
        name: state => state.footerStatus.name,
        address(state){
          return state.footerStatus.address;
        }
      }),
      ...mapState('footerStatus', {
        school: 'school'
      }),
      ...mapState('collection', ['field']),
      _use(){
        this.use;
      },
      ...mapGetters('collection', {
        arrList: 'renderCollects'
      })
    },
    methods: {
      changeSchool(){
        this.$store.dispatch("footerStatus/_changeSchool", '北大');
      }
    }
  }
</script>

<style scoped>

</style>

评论 (0)

用户名
邮箱
评论

    Copyright © 2020 darkNightMan All Rights Reserved Pro 黔ICP备20005477号