在使用Vue進(jìn)行組件通信時(shí)，一般情況下我們會(huì)通過傳遞數(shù)據(jù)或者組件的狀態(tài)來實(shí)現(xiàn)。然而，隨著需要管理的狀態(tài)越來越多，代碼會(huì)變得龐大而混亂。為了解決這個(gè)問題，Vue引入了Vuex，將公用的狀態(tài)抽離出來放在一

在使用Vue進(jìn)行組件通信時(shí)，一般情況下我們會(huì)通過傳遞數(shù)據(jù)或者組件的狀態(tài)來實(shí)現(xiàn)。然而，隨著需要管理的狀態(tài)越來越多，代碼會(huì)變得龐大而混亂。為了解決這個(gè)問題，Vue引入了Vuex，將公用的狀態(tài)抽離出來放在一個(gè)容器中，并通過一定的規(guī)則進(jìn)行管理。

首先，在Git命令行中執(zhí)行以下命令來搭建項(xiàng)目環(huán)境：

npm install --global vue-cli

vue init webpack vue-demo

cd vue-demo

npm install

npm run dev

接下來，刪除默認(rèn)的組件，并將整理如下：

Vuex的安裝和配置

完成基本環(huán)境搭建后，開始安裝Vuex。

npm install vuex --save-dev

在main.js中引入Vuex并注冊(cè)store：

import Vue from 'vue'
import Vuex from 'vuex'
import store from './vuex/store'
(Vuex)
new Vue({
  el: '#app',
  store,
  template: '',
  components: { App }
})

在src目錄下創(chuàng)建vuex目錄，并在該目錄下創(chuàng)建store.js，用于存放所有的狀態(tài)。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store  new ({
  state: {
    userName: 'John'
  }
})
export default store

將狀態(tài)渲染到組件中

在components目錄下創(chuàng)建組件，通過計(jì)算屬性獲取store中保存的狀態(tài)值并渲染到組件中：

lt;templategt;
  lt;divgt;
    lt;h1gt;{{ userName }}lt;/h1gt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
  export default {
    computed: {
      userName() {
        return this.$
      }
    }
  }
lt;/scriptgt;

在中引入組件：

lt;templategt;
  lt;div id"app"gt;
    lt;Main /gt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
import Main from ''
export default {
  components: {
    Main
  }
}
lt;/scriptgt;

現(xiàn)在，頁面上可以讀取到store容器中state的userName的值。如果修改了userName的值，頁面上也會(huì)相應(yīng)地發(fā)生變化。

通過交互改變狀態(tài)

我們可以通過一些交互操作來改變狀態(tài)，觀察組件是否能接收到狀態(tài)的變化。

在components目錄下創(chuàng)建組件：

lt;templategt;
  lt;divgt;
    lt;button @click"changeUserName"gt;Change Usernamelt;/buttongt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
export default {
  methods: {
    changeUserName() {
      this.$  'Jane'
    }
  }
}
lt;/scriptgt;

當(dāng)點(diǎn)擊按鈕時(shí)，改變store中userName的值，Main組件中的userName值也會(huì)相應(yīng)地更新。這種方式非常直觀易懂。

Vuex推薦的狀態(tài)改變方法

Vuex提供了一種更優(yōu)雅的方式來改變狀態(tài)，即使用mutations。

在store.js中創(chuàng)建mutations對(duì)象，用于存放被修改的狀態(tài)：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
(Vuex)
const store  new ({
  state: {
    userName: 'John'
  },
  mutations: {
    showUserName(state, msg) {
        msg
    }
  }
})
export default store

其中，showUserName是一個(gè)mutation函數(shù)，第一個(gè)參數(shù)state即為$，第二個(gè)參數(shù)msg需要從外部傳入。通過中的點(diǎn)擊事件來傳遞msg：

lt;templategt;
  lt;divgt;
    lt;button @click"changeUserName"gt;Change Usernamelt;/buttongt;
  lt;/divgt;
lt;/templategt;
lt;scriptgt;
export default {
  data() {
    return {
      msg: 'Jane'
    }
  },
  methods: {
    changeUserName() {
      this.$('showUserName', )
    }
  }
}
lt;/scriptgt;

這樣，通過$將的值提交給showUserName，狀態(tài)就會(huì)相應(yīng)地改變。這就是Vuex的最基本用法和作用。

總結(jié)

通過以上的步驟，我們成功搭建了基于vue-cli和webpack的Vue2.0項(xiàng)目，并使用Vuex進(jìn)行組件通信。通過Vuex，我們可以更好地管理和改變組件間的狀態(tài)，使代碼更加清晰和可維護(hù)。