4 vuex的安裝

安裝能夠看，引入又問題https://blog.csdn.net/u014196765/article/details/78022065?locationNum=9&fps=1（引入）

https://www.jianshu.com/p/ff2adb84c7f2 （看看此人的博客）

而後在main.js中引用store.js

import store from './assets/js/store'

在這以前，我已經分享過組件與組件的通訊機制以及父子組件之間的通訊機制，而咱們的vuex就是爲了解決組件通訊問題的

vuex是什麼東東呢？

組件通訊的本質其實就是在組件之間傳遞數據或組件的狀態（這裏將數據和狀態統稱爲狀態），但能夠看到若是咱們經過最基本的方式來進行通訊，一旦須要管理的狀態多了，代碼就會變得十分臃腫和龐大。對全部狀態的管理便會顯得力不從心，所以，vuex出現了，他就是幫助咱們把公用的狀態全抽出來放在vuex的容器中，而後根據必定的規則來進行管理，咱們趕忙來用一下吧，想要掌握vuex的用法，你應該要掌握組件之間的通訊，若是不瞭解，請參考如下這兩篇文章：

[js高手之路]Vue2.0基於vue-cli+webpack父子組件通訊教程

[js高手之路]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整理成如下樣子

 1 <template>
 2   <div id="app">
 3   這是一個空的app
 4   </div>
 5 </template>
 6 
 7 <script>
 8   export default {
 9     name : 'app'
10   }
11 </script>

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

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 
 4 Vue.use(Router)
 5 
 6 export default new Router({
 7   routes: [
 8     {
 9       path: '/',
10     }
11   ]
12 })

基本環境搭建完畢以後，開始安裝vuex了

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

1、安裝完成以後，在main.js中引入，並註冊store：這樣咱們就能經過this.$store來得到這個容器了

main.js代碼：

 1 import Vue from 'vue'
 2 import App from './App'
 3 import router from './router'
 4 import Vuex from 'vuex'
 5 import store from './vuex/store'
 6 
 7 Vue.use(Vuex)
 8 
 9 Vue.config.productionTip = false
10 
11 /* eslint-disable no-new */
12 new Vue({
13   el: '#app',
14   router,
15   store,
16   template: '<App/>',
17   components: { App }
18 })

2、在src目錄下建立vuex目錄，而後在vuex目錄下建立store.js，用於存放全部的狀態(改變的數據)

store.js代碼：

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 
 4 Vue.use(Vuex)
 5 
 6 const store = new Vuex.Store({
 7   state: {
 8     userName : 'ghostwu'
 9   }
10 })
11 
12 export default store

在state存儲了一個狀態userName

3、將狀態中的數據渲染到組件中

在components下面新建一個組件Main.vue，代碼以下:

 1 <template>
 2     <div>
 3         <h3>{{myName}}</h3>
 4     </div>
 5 </template>
 6 <script>
 7     export default {
 8         name : "Main",
 9         computed : {
10             myName (){
11                 return this.$store.state.userName;
12             }
13         }
14     }
15 </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的值，頁面上也會發生變化

5、，咱們經過一些交互來改變狀態，看下組件是否能收到state的值

在components組件下新建一個Header.vue組件，代碼以下：

 1 <template>
 2     <div>
 3         <input type="text" v-model="msg" />
 4         <input type="button" v-on:click="setName" value="點我" />
 5     </div>
 6 </template>
 7 <script>
 8     export default {
 9         name : 'Header',
10         data(){
11             return {
12                 msg : ''
13             }
14         },
15         methods : {
16             setName(){
17                 this.$store.state.userName = this.msg;
18             }
19         }
20     }
21 </script>

App.vue引入組件Header

App.vue代碼以下：

 1 <template>
 2   <div id="app">
 3     <Headerc></Headerc>
 4     <Mainc></Mainc>
 5   </div>
 6 </template>
 7 
 8 <script>
 9 import Headerc from './components/Header.vue';
10 import Mainc from './components/Main.vue';
11 export default {
12   name: 'app',
13   components : {
14     Headerc,
15     Mainc
16   }
17 }
18 </script>

當我點擊按鈕的時候，改變state中useName的值，Main組件中的state.userName的值也會跟着更新，這種改變方式很好理解，接下來咱們看下vuex推薦的狀態改變方式

6、vuex推薦的狀態改變方法

在store.js中新建一個mutations，存放被修改的狀態

 1 import Vue from 'vue'
 2 import Vuex from 'vuex'
 3 
 4 Vue.use(Vuex)
 5 
 6 const store = new Vuex.Store({
 7   state: {
 8     userName : 'ghostwu'
 9   },
10   mutations : {
11     showUserName( state, msg ){
12       state.userName = msg;
13     }
14   }
15 })
16 
17 export default store

其中第一個參數 state 就是 $store.state，第二個參數 msg 須要另外傳入，這個參數咱們經過Header.vue的點擊事件中的方法來傳遞

Header.vue代碼：

 1 <template>
 2     <div>
 3         <input type="text" v-model="msg" />
 4         <input type="button" v-on:click="setName" value="點我" />
 5     </div>
 6 </template>
 7 <script>
 8     export default {
 9         name : 'Header',
10         data(){
11             return {
12                 msg : ''
13             }
14         },
15         methods : {
16             setName(){
17                 this.$store.commit( 'showUserName', this.msg );
18             }
19         }
20     }
21 </script>