詳解在vue-cli和webpack構建的腳手架中如何使用Vuex(學習筆記)

其實之前使用vue開發專案的時候，由於資料互動不多，所以一直遲遲未使用vuex，我一般採用event bus進行通訊,但是隨著專案需求不同，覺得有必要揭開vuex的神祕面紗了。（殺豬般的笑聲，^_^）

1.首先是安裝和註冊

 1. 安裝命令:npm install vuex --save-dev
 2. 安裝完成後需要在main.js中引入，如下所示：
 import Vuex from 'vuex'
 import store from './vuex/store'
 Vue.use(Vuex)
 new Vue({
    el: '#app'
 
,
    router,
    store,
    template: '<App/>',
    components: { App }
})

2.準備工作就緒，就開始研究怎麼具體使用了，首先丟擲一個錯誤，啊不對，是丟擲一個問題，什麼是vuex?

官方文件的解釋是這樣滴：

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

這兩句話中有幾個關鍵詞：狀態管理 、 集中式 、可預測的方式發生變化

抓住這些關鍵詞來分析，我們可以簡單理解成：vuex就是將元件中公用的狀態全部抽出來，集中去管理，無論你是獲取狀態還是更改狀態，都通過vuex來進行。

3.接著，我們正式開始在專案中使用vuex

• 在src下面新建一個vuex目錄，並且新建一個store.js的檔案(用來管理所有狀態)

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
        age: '18' //儲存了一個公共狀態age
    }，
    mutations : {
        showAge(state, msg){
            state.age= msg;
        }
    }
}) 
export default
 
 store

現在我們想要在元件中拿到這個狀態，並且渲染到頁面中，首先你得有個元件，如下：

components1.vue（子元件）

基本結構得有，這只是一個簡單的獲取狀態
<template>
    <div class="components1">
        <div>
            <input type="text" v-model="msg" />
            <input type="button" v-on:click="setAge" value="點我" />
        </div>
    </div>
</template>

<script>
    export default {
        name: 'components1',
        data(){
            return {
                msg : ''
            }
        },
        methods : {
            setName(){
                this.$store.commit( 'showAge', this.msg ); //在元件1中修改元件3的狀態
            }
        }
    }
</script>

<style scoped lang="scss"></style>

components3..vue（子元件）

<template>
    <div>
        <h3>{{mAge}}</h3>
    </div>
</template>
<script>
    export default {
        name : "components3",
        computed : { //一般會在元件的計算屬性（computed）獲取state的資料（因為，計算屬性會監控資料變化，一旦發生改變就會響應）
            myAge (){
                return this.$store.state.age;
            }
        }
    }
</script>

components2.vue（現在我們開始元件巢狀，components1和components3是components2的子元件）

<template>
  <div id="app">
    <components1></components1> //我們可以在元件2中渲染出元件1的值，並且在改變state中的age時，元件2中的元件1也會更新。
    <components3></components3>
  </div>
</template>

<script>
import components1 from './components/components1';
import components3 from './components/components3';
export default {
  name: 'app',
  components : {
    components1,
    components3
  }
}
</script>

說真的 ，我已經被繞暈了。。。。。。。自己覺得明白，但是表達不出來。。。尷尬