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