<router-link to="/login">{{ $store.state.userName }}</router-link>
<router-link to="/login">{{ store.state.userName }}</router-link>
<router-link to="/login">{{ this.store.state.userName }}</router-link>
<router-link to="/login">{{ this.$store.state.userName }}</router-link>

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters' // 導(dǎo)入響應(yīng)的模塊，*相當(dāng)于引入了這個(gè)組件下所有導(dǎo)出的事例
import * as actions from './actions'
import * as mutations from './mutations'
 
Vue.use(Vuex)
// 首先聲明一個(gè)需要全局維護(hù)的狀態(tài) state,比如 我這里舉例的resturantName
const state = {
  resturantName: '飛歌餐館' // 默認(rèn)值
  // id: xxx 如果還有全局狀態(tài)也可以在這里添加
  // name:xxx
}
// 注冊上面引入的各大模塊
const store = new Vuex.Store({
  state,  // 共同維護(hù)的一個(gè)狀態(tài)，state里面可以是很多個(gè)全局狀態(tài)
  getters, // 獲取數(shù)據(jù)并渲染
  actions, // 數(shù)據(jù)的異步操作
  mutations // 處理數(shù)據(jù)的唯一途徑，state的改變或賦值只能在這里
})
 
export default store // 導(dǎo)出store并在 main.js中引用注冊。

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'
Vue.use(Vuex)
/* eslint-disable no-new */
const store = new Vuex.Store({
 modules: {
  user //包含state、actions、mutations 
 },
 getters
})
export default store

// 提交 mutations是更改Vuex狀態(tài)的唯一合法方法
export const modifyAName = (state, name) => { // A組件點(diǎn)擊更改餐館名稱為 A餐館
  state.resturantName = name // 把方法傳遞過來的參數(shù)，賦值給state中的resturantName
}
export const modifyBName = (state, name) => { // B組件點(diǎn)擊更改餐館名稱為 B餐館
  state.resturantName = name
}

// 給action注冊事件處理函數(shù)。當(dāng)這個(gè)函數(shù)被觸發(fā)時(shí)候，將狀態(tài)提交到mutations中處理
export function modifyAName({commit}, name) { // commit 提交；name即為點(diǎn)擊后傳遞過來的參數(shù)，此時(shí)是 'A餐館'
  return commit ('modifyAName', name)
}
export function modifyBName({commit}, name) {
  return commit ('modifyBName', name)
}
 
// ES6精簡寫法
// export const modifyAName = ({commit},name) => commit('modifyAName', name)

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
 
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store, // 這樣就能全局使用vuex了
 components: { App },
 template: '<App/>'
})

const user = {
 state: {
  resturantName: '飛歌餐館' // 默認(rèn)值
  // id: xxx 如果還有全局狀態(tài)也可以在這里添加
  // name:xxx
 },
 
 mutations: {
  // 提交 mutations是更改Vuex狀態(tài)的唯一合法方法
  modifyAName : (state, name) => { // A組件點(diǎn)擊更改餐館名稱為 A餐館
   state.resturantName = name // 把方法傳遞過來的參數(shù)，賦值給state中的resturantName
  },
  modifyBName : (state, name) => { // B組件點(diǎn)擊更改餐館名稱為 B餐館
   state.resturantName = name
  }
 },
 actions: {
  // 給action注冊事件處理函數(shù)。當(dāng)這個(gè)函數(shù)被觸發(fā)時(shí)候，將狀態(tài)提交到mutations中處理
  modifyAName({commit}, name) { // commit 提交；name即為點(diǎn)擊后傳遞過來的參數(shù)，此時(shí)是 'A餐館
   return commit ('modifyAName', name)
  },
  modifyBName({commit}, name) {
   return commit ('modifyBName', name)
  }
 
  // ES6精簡寫法
  //modifyAName:({commit},name) => commit('modifyAName', name)
 
 }
}
export default user

<template>
 <div class="componentsA">
   <P class="title">組件A</P>
   <P class="titleName">餐館名稱：{{resturantName}}</P>
   <div>
      <!-- 點(diǎn)擊修改 為 A 餐館 -->
     <button class="btn" @click="modifyAName('A餐館')">修改為A餐館</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToB">跳轉(zhuǎn)到B頁面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'A',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 語法糖
     ['modifyAName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個(gè)方法
   ),
   trunToB () {
     this.$router.push({path: '/componentsB'}) // 路由跳轉(zhuǎn)到B
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 動態(tài)計(jì)算屬性，相當(dāng)于this.$store.getters.resturantName
 }
}
</script>

<template>
 <div class="componentsB">
   <P class="title">組件B</P>
   <P class="titleName">餐館名稱：{{resturantName}}</P>
   <div>
     <!-- 點(diǎn)擊修改 為 B 餐館 -->
     <button class="btn" @click="modifyBName('B餐館')">修改為B餐館</button>
   </div>
   <div class="marTop">
     <button class="btn" @click="trunToA">跳轉(zhuǎn)到A頁面</button>
   </div>
 </div>
</template>
 
<script>
import {mapActions, mapGetters} from 'vuex'
export default {
 name: 'B',
 data () {
  return {
  }
 },
 methods:{
   ...mapActions( // 語法糖
     ['modifyBName'] // 相當(dāng)于this.$store.dispatch('modifyName'),提交這個(gè)方法
   ),
   trunToA () {
     this.$router.push({path: '/componentsA'}) // 路由跳轉(zhuǎn)到A
   }
 },
 computed: {
   ...mapGetters(['resturantName']) // 動態(tài)計(jì)算屬性，相當(dāng)于this.$store.getters.resturantName
 }
}
</script>