在這之前，我已經分享過組件與組件的通信機制以及父子組件之間的通信機制，而我們的vuex就是為了解決組件通信問題的
vuex是什么東東呢？
組件通信的本質其實就是在組件之間傳遞數據或組件的狀態（這里將數據和狀態統稱為狀態），但可以看到如果我們通過最基本的方式來進行通信，一旦需要管理的狀態多了，代碼就會變得十分臃腫和龐大。對所有狀態的管理便會顯得力不從心，因此，vuex出現了，他就是幫助我們把公用的狀態全抽出來放在vuex的容器中，然后根據一定的規則來進行管理，我們趕緊來用一下吧，想要掌握vuex的用法，你應該要掌握組件之間的通信，如果不了解，請參考以下這兩篇文章：
Vue2.0基于vue-cli+webpack父子組件通信教程(實例講解)
Vue2.0基于vue-cli+webpack同級組件之間的通信教程(推薦)
搭建環境開始：
在git命令行下，執行以下命令完成環境的搭建：
1，npm install --global vue-cli 安裝vue命令行工具
2，vue init webpack vue-demo 使用vue命令生成一個webpack項目，項目名稱為vue-demo
3，cd vue-demo 切入項目
4，npm install安裝package.json中的所有依賴包
5，npm run dev運行項目
然后刪除默認的Hello.vue組件，把App.vue整理成以下樣子
<template> <div id="app"> 這是一個空的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: '/', } ]})基本環境搭建完畢之后，開始安裝vuex了
安裝命令:npm install vuex --save-dev
一、安裝完成之后，在main.js中引入，并注冊store：這樣我們就能通過this.$store來獲得這個容器了
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目錄下創建vuex目錄，然后在vuex目錄下創建store.js，用于存放所有的狀態(改變的數據)
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存儲了一個狀態userName
三、將狀態中的數據渲染到組件中
在components下面新建一個組件Main.vue，代碼如下:
<template> <div> <h3>{{myName}}</h3> </div></template><script> export default { name : "Main", computed : { myName (){ return this.$store.state.userName; } } }</script>通過一個計算屬性獲取到存儲在全局容器store中state保存的狀態值
四，在App.vue中引入組件Main.vue
App.vue代碼:
<template> <div id="app"> <Mainc></Mainc> </div></template><script>import Mainc from './components/Main.vue';export default { name: 'app', components : { Mainc }}</script>這個時候，就能看見在頁面上把store容器中 state的userName的值讀取出來了， 如果修改userName的值，頁面上也會發生變化
五、，我們通過一些交互來改變狀態，看下組件是否能收到state的值
在components組件下新建一個Header.vue組件，代碼如下：
<template> <div> <input type="text" v-model="msg" /> <input type="button" v-on:click="setName" value="點我" /> </div></template><script> export default { name : 'Header', data(){ return { msg : '' } }, methods : { setName(){ this.$store.state.userName = this.msg; } } }</script>App.vue引入組件Header
App.vue代碼如下：
<template> <div id="app"> <Headerc></Headerc> <Mainc></Mainc> </div></template><script>import Headerc from './components/Header.vue';import Mainc from './components/Main.vue';export default { name: 'app', components : { Headerc, Mainc }}</script>當我點擊按鈕的時候，改變state中useName的值，Main組件中的state.userName的值也會跟著更新，這種改變方式很好理解，接下來我們看下vuex推薦的狀態改變方式
六、vuex推薦的狀態改變方法
在store.js中新建一個mutations，存放被修改的狀態
import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { userName : 'ghostwu' }, mutations : { showUserName( state, msg ){ state.userName = msg; } }})export default store其中第一個參數 state 就是 $store.state，第二個參數 msg 需要另外傳入，這個參數我們通過Header.vue的點擊事件中的方法來傳遞
Header.vue代碼：
<template> <div> <input type="text" v-model="msg" /> <input type="button" v-on:click="setName" value="點我" /> </div></template><script> export default { name : 'Header', data(){ return { msg : '' } }, methods : { setName(){ this.$store.commit( 'showUserName', this.msg ); } } }</script>$store.commit 把this.msg的值提交給showUserName。state就收到了改變的狀態了，這就是一個vuex最基本的用法和作用
以上這篇Vue2.0基于vue-cli+webpack Vuex的用法(實例講解)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。
新聞熱點
疑難解答
