Vuex-全局状态管理【传递参数】

由于 async 异步获取数据，加载页面时，页面会感觉一闪而过的抖动，如果想页面不闪，推荐使用 SSR 【vuex】，由服务端 渲染SSR页面出来。此话记于 2020年01月08号，项目nuxt.js 构建 Vue+Koa+MongoDB 全栈美团项目

src根目录

新建store文件夹，新建index.js 作为入口

在store文件夹中 新建modules文件夹

modules文件夹中，新建 a.js b.js 2个文件

a.js

const state = {
  money: 10
}

const mutations = {
  // 我这里收到 参数以后，操作state.money的值改变
  add(state, param) {
    state.money += param
  },
  reduce(state) {
    state.money--
  }
}

const actions = {
  //这里先接收到参数，我在驱动mutation里的add方法，同时传入参数
  Actions_add: ({ commit }, param) => {
    commit('add', param)
  },
  Actions_reduce: ({ commit }) => {
    commit('reduce')
  }
}

export default {
  namespaced: true,//命名空间模块
  state,
  mutations,
  actions
}

b.js

const state = {
  count: 1
}

const mutations = {
  add(state){
    state.count++
  },
  reduce(state) {
    state.count--
  }
}

const actions = {
  Actions_add:({commit})=>{
    commit('add')
  },
  Actions_reduce:({commit})=>{
    commit('reduce')
  }
}

export default {
  namespaced:true,//命名空间模块
  state,
  mutations,
  actions
}

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import money from './modules/a'
import count from './modules/b'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    money,
    count
  }
})

* 记得不要忘记在 main.js 中引入

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'
// import store from './store'
Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

在新建 a.vue \ b.vue 2个组件

a.vue

<template>
    <div class="container">
      <h1>Money</h1>
      <hr />
      <div class="input-group">
        <span class="input-group-btn">
          <button type="button" class="btn btn-success" @click="Actions_add(2)">增加2</button>
        </span>
        <input type="text" class="form-control"  v-model="money.money" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button>
        </span>
      </div>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex"
export default {
  methods: {
   ...mapActions('money',["Actions_add", "Actions_reduce"])
  },
  computed: {
    ...mapState([
      'money'
    ])
  }

}
</script>

<style>

</style>

b.vue

<template>
    <div class="container">
      <h1>Count</h1>
      <hr />
      <div class="input-group">
        <span class="input-group-btn">
          <button type="button" class="btn btn-success" @click="Actions_add">增加</button>
        </span>
        <input type="text" class="form-control"  v-model="count.count" />
        <span class="input-group-btn">
          <button type="button" class="btn btn-danger" @click="Actions_reduce">减少</button>
        </span>
      </div>
    </div>
</template>

<script>
import { mapActions, mapState } from "vuex"
export default {
  methods: {
   ...mapActions('count',["Actions_add", "Actions_reduce"])
  },
  computed: {
    ...mapState([
      'count'
    ])
  }

}
</script>

<style>

</style>

效果图：