VUEX的使用 参数与方法的传递

VUEX的使用 参数与方法的传递

vuex的传值要比prop跟emit要方便的很，虽然不知道性能方面，但是确实很方便
直接上代码

页面代码

做一个简单的加加减减的例子

<template>
    <div class="vuexdemo">
        {{count}}
        <button @click="addFun()">+</button>
        <button @click="reduceFun()">-</button>
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
export default {
    data(){
        return{

        }
    },
    computed:{
        ...mapState([count])
    },
    methods:{
        ...mapActions([
            "addFun",
            "reduceFun"
        ])
        /* add(){
            this.$store.commit('add')
        },red(){
            this.$store.commit('red')
        } */
    }
}
</script>

这里面引用的2个方法mapState, mapActions
mapState是获取参数 在computed属性内写入...mapState([count])就可以获取到VUEX 里面的count的值
mapState可以用来调用VUEX内的方法，VUEX里面的方法可以直接操作VUEX的参数，所以说我们一般使用mapState操作VUEX的参数
虽然说我们可以用我注释掉的那个方法获取VUEX里面的方法，但是会让代码看起来非常乱，所以说就在VUEX内写好相应的代码，直接调取写的好的就可以让代码看起来不是那么的乱，调用起来也很方便。

VUEX代码

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:1,
  },
  mutations: {
  	add(state){
       state.count=state.count+1
     },red(state){
       state.count=state.count-1
     }
  },
  actions: {
     addFun(context){
       context.commit('add')
     },
     reduceFun(context){
       context.commit('red')
     }
  },
  modules: {
  }
})

这里actions就是调用mutations里面的方法，页面上就可以直接调用actions操作上面的方法，如果你不用这种调用方法，那么这个actions也不需要写了
把数据上传到这个文件内，其他文件就可以直接使用mapState获取参数了