标签：... 模块化 state 模块 mapGetters mapMutations vuex moduleA

<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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。