在這之前，我已經(jīng)分享過組件與組件的通信機(jī)制以及父子組件之間的通信機(jī)制，而我們的vuex就是為了解決組件通信問題的

vuex是什么東東呢？

組件通信的本質(zhì)其實(shí)就是在組件之間傳遞數(shù)據(jù)或組件的狀態(tài)（這里將數(shù)據(jù)和狀態(tài)統(tǒng)稱為狀態(tài)），但可以看到如果我們通過最基本的方式來進(jìn)行通信，一旦需要管理的狀態(tài)多了，代碼就會(huì)變得十分臃腫和龐大。對(duì)所有狀態(tài)的管理便會(huì)顯得力不從心，因此，vuex出現(xiàn)了，他就是幫助我們把公用的狀態(tài)全抽出來放在vuex的容器中，然后根據(jù)一定的規(guī)則來進(jìn)行管理，我們趕緊來用一下吧，想要掌握vuex的用法，你應(yīng)該要掌握組件之間的通信，如果不了解，請(qǐng)參考以下這兩篇文章：

Vue2.0基于vue-cli+webpack父子組件通信教程(實(shí)例講解)

Vue2.0基于vue-cli+webpack同級(jí)組件之間的通信教程(推薦)

搭建環(huán)境開始：

在git命令行下，執(zhí)行以下命令完成環(huán)境的搭建：

1，npm install --global vue-cli  安裝vue命令行工具

2，vue init webpack vue-demo   使用vue命令生成一個(gè)webpack項(xiàng)目，項(xiàng)目名稱為vue-demo

3，cd vue-demo 切入項(xiàng)目

4，npm install安裝package.json中的所有依賴包

5，npm run dev運(yùn)行項(xiàng)目

然后刪除默認(rèn)的Hello.vue組件，把App.vue整理成以下樣子

<template> <div id="app"> 這是一個(gè)空的app </div></template><script> export default {  name : 'app' }</script>

 把router下面index.js文件修改如下：

import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)export default new Router({ routes: [  {   path: '/',  } ]})

基本環(huán)境搭建完畢之后，開始安裝vuex了

安裝命令:npm install vuex --save-dev

一、安裝完成之后，在main.js中引入，并注冊(cè)store：這樣我們就能通過this.$store來獲得這個(gè)容器了

main.js代碼：

import Vue from 'vue'import App from './App'import router from './router'import Vuex from 'vuex'import store from './vuex/store'Vue.use(Vuex)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({ el: '#app', router, store, template: '<App/>', components: { App }})

二、在src目錄下創(chuàng)建vuex目錄，然后在vuex目錄下創(chuàng)建store.js，用于存放所有的狀態(tài)(改變的數(shù)據(jù))

store.js代碼：

import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: {  userName : 'ghostwu' }})export default store

在state存儲(chǔ)了一個(gè)狀態(tài)userName

三、將狀態(tài)中的數(shù)據(jù)渲染到組件中

在components下面新建一個(gè)組件Main.vue，代碼如下:

<template>  <div>    <h3>{{myName}}</h3>  </div></template><script>  export default {    name : "Main",    computed : {      myName (){        return this.$store.state.userName;      }    }  }</script>