vuex模块化

<script>
import { mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default{
    name:'Count' ,
    data(){
    },
    computed:{
    //组件中以对象形式获取state,我们也可以用简写的方式,如果用简写方式就要以数组方式进行存取
     ...mapState({
            count:state=>state.cart.count
            cartShop:state=>state.cart.cartShop
        })
        //因为我们有多个模块,并且我们为模块加上了命名空间,所以我们可以在前面指定名字,来跟vuex说我们需要从哪个模块里面获取这个状态
         ...mapState('cart',['count','cartShop'])
    //mapGetters获取的两种方式
    //1
    ...mapGetters('moduleA',['moduleAGetter']),此处的moduleA,不是以前缀的形式出现!!!
    //2.别名状态下
    ...mapGetters({
        paramGetter:'moduleA/moduleAGetter
       })
    },
    methods:{
        4.组件中调用命名空间模块中的Mutations
        共有三种方式,如下:
        //1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
        //1.直接获取
        commonMutation(){
            this.$store.commit('moduleA/moduleAMutation');
        },
        //2.用mapMutations
        ...mapMutations('moduleA',['moduleAMutation']),
        //3.别名状态下
        ...mapMutations({
            changeNameMutation:'moduleA/moduleAMutation'
        }),
        5.组件中调用命名空间模块中的Actions(与mutations一致)
        共有三种方式,如下:
        1,3加个前缀moduleA/,都可以实现。2使用辅助函数未变名称的特殊点!!!
        //1.
        commonAction(){
            this.$store.dispatch('moduleA/moduleAAction')
        },
        //2.
        ...mapActions('moduleA',['moduleAAction']),
        //3.别名状态下
        ...mapActions({
            changeNameAction:'moduleA/moduleAAction'
         })
    }
}




posted @   方方面  阅读(122)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 字符编码:从基础到乱码解决
· 提示词工程——AI应用必不可少的技术
点击右上角即可分享
微信分享提示