***Vue-局部参数***

在new Vuex({})的时候,vuex的参数对象,除了可以罗列modules之外,还可以设置state,mutations,getters,actions,和之前设置的单一对象相同。

store.js

import Vuex from 'vuex'
import Vue from 'vue'
import news from './news.js'
import sports from './sports.js'
import user from './user.js'
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        news,
        sports,
        user
    },
    state:{
        name : '张三',
    },
    mutations:{
        add(){
            console.log('触发add')
        }
    },
    getters:{  },
    actions:{}
})

可在任意页面中使用

<div>
    {{$store.state.name}}
</div>

局部参数

可以在vue文件中引入设置局部参数

比如 app.vue 中引入vuex,罗列对应的map函数

import Vuex from 'vuex'
<script>
import Vuex from 'vuex'
  export default {
     mounted (){
       console.log(Vuex)
     }
  }
</script>

例:

<template>
  <div>
    <button @click="add">触发全局add</button>
    <h1>{{name}}{{sex}}</h1>
    <button @click="addNum">触发了mapMutations</button>
    <button @click="addServe">触发mapActions</button>
  </div>
</template>
<script>
import {  mapState,mapGetters,mapMutations, mapActions  } from 'vuex'
  export default {
     methods:{
       add(){
          this.$store.commit('add')
       },
       ...mapMutations([
         'addNum'
        ]),
      ...mapActions([
        'addServe'
      ])
     },
    computed:{
      ...mapState({
        name:data=> data.name
      }),
      ...mapGetters(['sex'])
    }
  }
</script>
<style>
</style>

store.js

import Vuex from 'vuex'
import Vue from 'vue'
import news from './news.js'
import sports from './sports.js'
import user from './user.js'
Vue.use(Vuex)
export default new Vuex.Store({
    modules:{
        news,
        sports,
        user
    },
    state:{
        name : '张三',
    },
    mutations:{
        add(){
            console.log('触发add')
        },
        addNum(){
            console.log('局部mapMutations')
        }
    },
    getters:{  
        sex(state){
            if(state.name == '张三'){
                return '男'
            }
        }
    },
    actions:{
        addServe(){
            console.log('局部mapActions')
        }
    }
})

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值