vuex mapGetters方法,传参数

1.getters.js中方法:

//home.js文件
//在state中声明count
const state = {
    count: 1
}

const getters = {
    // desc: (state) => (ss) => {
    //     console.log('SS:',ss)
    //     if (state.count<50) {
    //         return "吃饭";
    //     } else if (state.count>50 && state.count<100) {
    //         return "睡觉";
    //     } else {
    //         return "打豆豆";
    //     }
    // }
    desc: function(state) {
        return function(ss) {
            if (state.count<50) {
                return "吃饭";
            } else if (state.count>50 && state.count<100) {
                return "睡觉";
            } else {
                return "打豆豆";
            }
        }
    }
}

const mutations = {
    increment(state,n) {
        state.count += n;
    }
}

const actions = {
    add(context,m) {
        context.commit("increment",m);
    }
}

export default {
    namespaced: true,//解决模块命名冲突
    state,
    getters,
    mutations,
    actions
}

2.调用:

    <div>
		<!-- 调用,xxx是参数 -->
        desc: {{desc(xxx)}}
    </div>
<script>
// 导入mapGetters 
import { mapGetters } from 'vuex'
    
export default {
	computed: {
           //...
           ...mapGetters({
               desc: 'home/desc'
           }),
           // 或者
           // ...mapGetters('home',['desc'])
   	 }
}
</script>

home是什么意思:

import Vue from "vue";
import Vuex from "vuex";

import home from "@/store/modules/home"
import bill from "@/store/modules/bill"
import userInfo from "@/store/modules/userinfo";

Vue.use(Vuex);

const store = new Vuex.Store({
  modules: {
    home,//导出的模块名
    bill,
    userInfo
  }
})

export default store
Logo

前往低代码交流专区

更多推荐