vuex中函数用法汇总

<div>
    <p>1.如何全局使用state</p>
    <span>{{this.$store.state.xxx }}</span>
    computed:{ 
        ...mapState(['xxx']) 
        ...mapState({新名字:'xxx'})
    }

    <p>2.如何使用modules中的state</p>
    <span>{{ this.$store.state.模块名.xxx }}</span>
    computed:{ 
        ...mapState('模块名',['xxx']) 
        ...mapState('模块名',{新名字:'xxx'})
    }

    <p>3.是个使用全局getters</p>
    <span>{{ this.$store.getters.xxx }}</span>
    computed:{
        ...mapGetters(['xxx'])
        ...mapGetters({'新名字':'xxx'})
    }

    <p>4.如何使用modules中的getters</p>
    <span>{{ this.$store.getters.模块名.xxx }}</span>
       computed:{
        ...mapGetters('模块名',['xxx'])
        ...mapGetters('模块名',{'新名字':'xxx'})
    }

    <p>5.如何使用全局中的mutations</p>
    <span>{{ this.$store.commit("mutation名", 参数) }}</span>
    methods:{
        ...mapMutations(['mutation名字'])
        ...mapMutations({'新名字':'motations名'})
    }

    <p>6.如何使用modules中的mutations(namespaced:true)</p>
    <span>{{ this.$store.commit("模块名/mutation名",参数) }}</span>
        methods:{
        ...mapMutations('模块名',['motations名'])
        ...mapMutations('模块名',{'新名字':'motations名'})
    }

    <p>7.如何使用全局actions</p>
    <span>{{ this.$store.dispatch("actions名", 参数) }}</span>
      methods:{
        ...mapActions(['actions名字'])
        ...mapActions({'新名字':'actions名'})
    }

    <p>8.如何使用modules中的actions</p>
    <span>{{ this.$store.dispatch("模块名/action名",参数) }}</span>
      methods:{
        ...mapActions(['模块名',['action名'])
        ...mapActions('模块名',{'新名字':'actions名'})
    }
  </div>