Vuex 快速入門 簡單易懂

1、vuex介紹

（1）vuex是什麼？

1. 借鑑 了Flux、Redux、 The Elm Architecture

2. 專爲 Vue.js 設計 的狀態管理模式

3. 集中式存儲和管理應用程序中全部組件的狀態

4. Vuex 也集成到 Vue 的官方調試工具

5. 一個 Vuex 應用的核心是 store（倉庫，一個容器），store包含着你的應用中大部分的狀態 (state)。

（2）什麼狀況下我應該使用 Vuex？

1. 不適用：小型簡單應用，用 Vuex 是繁瑣冗餘的，更適合使用簡單的 store 模式。

2. 適用於：中大型單頁應用，你可能會考慮如何把組件的共享狀態抽取出來，以一個全局單例模式管理，無論在哪一個組件，都能獲取狀態/觸發行爲，解決問題以下：

① 多個視圖使用於同一狀態：

傳參的方法對於多層嵌套的組件將會很是繁瑣，而且對於兄弟組件間的狀態傳遞無能爲力

② 不一樣視圖須要變動同一狀態：

採用父子組件直接引用或者經過事件來變動和同步狀態的多份拷貝，一般會致使沒法維護的代碼

（3）Vuex 和單純的全局對象有何不一樣？

1.Vuex 的狀態存儲是響應式的

當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地獲得高效更新。

2.你不能直接改變 store 中的狀態

改變 store 中的狀態的惟一途徑就是顯式地提交 (commit) mutation，方便咱們跟蹤每個狀態的變化。

2、vuex安裝

* vue cli 3 中搭建腳手架預設時選擇了「vuex」後便安裝了vuex，可跳過此步閱讀

（1）<script>引入

在 Vue 以後引入 vuex 會進行自動安裝：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

（2） 包管理

npm install vuex --save //yarn add vuex

在一個模塊化的打包系統中，您必須顯式地經過 Vue.use() 來安裝 Vuex： 

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

（3）git clone 本身構建

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

（4）兼容

Vuex 依賴 Promise。若是你支持的瀏覽器並無實現 Promise (如 IE)，那麼你可使用一個 polyfill 的庫(如  es6-promis)

1.你能夠經過 CDN 將其引入，window.Promise 會自動可用：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

2.包管理器安裝：

npm install es6-promise --save //yarn add es6-promise

而後，將下列代碼添加到你使用 Vuex 以前的一個地方：

import 'es6-promise/auto'

3、使用

（1）使用介紹

1.搭建store實例

①. 在建立vuex實例的地方引入vue、vuex，使用vuex：

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

Vue.use(Vuex); //使用 vuex

②. 若是你的actions中用到 store.dispath() ,要引入store

import store from './store' //引入狀態管理 store

③. new 一個 Vuex.Store 實例，並註冊 state、mutations、actions、getters到 Vuex.Store 實例中

ps. 你能夠像上面那樣將「屬性和值」直接寫在實例中，當代碼量大時，你也能夠分別寫個.js文件，以下圖：

而後引入到 store/index.js 註冊到vuex實例中，如：

2.建立好 vuex.store 後，你須要在入口文件 main.js 中引入 store 並註冊到 vue 實例中，這樣就能夠在任何組件使用store了：

3.在組件中使用：

①. 引入vuex中各屬性對應的輔助函數：

import {mapActions, mapState,mapGetters} from 'vuex' //註冊 action 、 state 、getter

②. 使用store中的狀態數據、方法：

使用方法有不少，這種事最簡單實用的，更多能夠查看官網學習：https://vuex.vuejs.org/zh/

（2）具體demo

來個簡單易懂的計數

eg：store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //註冊store

Vue.use(Vuex); //使用 vuex

export default new Vuex.Store({
    state: {
        // 初始化狀態
        count: 0,
        someLists:[]
    },
    mutations: {
        // 處理狀態
        increment(state, payload) {
            state.count += payload.step || 1;
        }
    },
    actions: {
        // 提交改變後的狀態
        increment(context, param) {
            context.state.count += param.step;
            context.commit('increment', context.state.count)//提交改變後的state.count值
        },
        incrementStep({state, commit, rootState}) {
            if (rootState.count < 100) {
                store.dispatch('increment', {//調用increment()方法
                    step: 10
                })
            }
        }
    },
    getters: {
        //處理列表項
        someLists: state =>param=> {
            return state.someLists.filter(() => param.done)
        }
    }
})

使用時，eg：

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入狀態管理 store

Vue.config.productionTip = false

new Vue({
  router,
  store,//註冊store(這能夠把 store 的實例注入全部的子組件)
  render: h => h(App)
}).$mount('#app')

views/home.vue：

<template>
  <div class="home">
    <!--在前端HTML頁面中使用 count-->
    <HelloWorld :msg="count"/>
    <!--表單處理 雙向綁定 count-->
    <input :value="count" @input="incrementStep">
  </div>
</template>

<script>
    import HelloWorld from '@/components/HelloWorld.vue'
    import {mapActions, mapState,mapGetters} from 'vuex' //註冊 action 和 state

    export default {
        name: 'home',
        computed: {
            //在這裏映射 store.state.count，使用方法和 computed 裏的其餘屬性同樣
            ...mapState([
                'count'
            ]),
            count () {
                return store.state.count
            }
        },
        created() {
            this.incrementStep();
        },
        methods: {
            //在這裏引入 action 裏的方法，使用方法和 methods 裏的其餘方法同樣
            ...mapActions([
                'incrementStep'
            ]),
            // 使用對象展開運算符將 getter 混入 computed 對象中
            ...mapGetters([
                'someLists'
                // ...
            ])
        },
        components: {
            HelloWorld
        }
    }
</script>

運行結果：