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>

效果圖：