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'
         })
    }
}

标签：...,模块化,state,模块,mapGetters,mapMutations,vuex,moduleA
来源： https://www.cnblogs.com/daxiong182/p/16350273.html