Vuex的基本使用

liaohui5發表於2019-03-03
Vue

官方文件

https://vuex.vuejs.org/zh/installation.html

vuex 是什麼

Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式.

為什麼要使用vuex

vux 可以解決多個元件之間的通訊問題

vuex 基本瞭解

  1. 容器(store): 用於儲存狀態的
  2. 狀態(state): 多個元件需要共享的資料(就可以稱之為狀態)
  3. 突變(mutations): 由於單向資料流的關係,如果元件需要修改容器中的狀態,就必須通過mutations 可以將這個mutation理解為一個狀態管理員, 元件想要修改狀態就必須告訴管理員, 由管理員來決定是否更改資料,需改資料的規則, 如下圖所示
    vuex

此處的狀態可以簡單的理解為 需要被多個元件共享的資料

getter

有時候我們需要根據store中的state的資料進行過濾加工,就需要使用 getter, 例如對陣列進行過濾,然後產生一個新的陣列展示到頁面中, 比如髒話(字串)過濾.... 我們可以將vux中的 getter 理解為 vue例項的計算屬性

基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuex study</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vuex/dist/vuex.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .current{
            line-height: 100px;
            text-align: center;
            background: #000;
            color: deepskyblue;
            font-size: 30px;
        }
        .other{
            background: #888888!important;
        }
        .btns {
            text-align: center;
            margin: 30px 0;
        }
        .btns button{
            border: none;
            width: 120px;
            line-height: 30px;
            background: #000;
            color: deepskyblue;
        }
    </style>
</head>
<body>

<div id="app">
    <calc></calc>
    <other-component></other-component>
</div>


<template id="calc">
    <div>
        <p class="current">現在的狀態: {{$store.state.counter}} </p>
        <p class="btns"> <button @click="inc">加</button> <button @click="dec">減</button> </p>
    </div>
</template>

<template id="other">
    <div>
        <p class="current other">其他元件中的狀態: {{$store.state.counter}} </p>
        <p class="current other">在其他元件中使用getter屬性: {{$store.getters.computeCounter}} </p>
    </div>
</template>


<!-- javascript -->
<script>
    let otherComponent = Vue.extend({
        template: '#other',
    });

    let calc = Vue.extend({
        template: '#calc',
        methods: {
            inc () {
                // 當點選"加"的按鈕式就觸發這個函式,提交一個 increment 的 mutation
                this.$store.commit('increment', 2);
            },
            dec () {
                // 當點選"減"的按鈕式就觸發這個函式,提交一個 decrement 的 mutation
                this.$store.commit('decrement', 3);
            }
        },
    });


    /**
     * 因為容器只有一個所以 vuex 的例項也必須只有一個
     * 所以,建議使用 const 關鍵字來定義
     */
    const vuex = new Vuex.Store({
        state: {
            counter: 0,
        },
        // 開啟嚴格模式,開啟嚴格模式後,必須通過 mutation 來修改狀態
        strict: true,
        mutations: {
            // state 是預設傳遞的引數,可以直接使用,
            increment(state, size){
                state.counter += size;
                if (state.counter >= 10) {
                    state.counter  = 10;
                }
            },
            decrement(state, size){
                state.counter -= size;
                if (state.counter <= 0){
                    state.counter  = 0;
                }
            }
        },
        getters: {
            computeCounter: state => {
                return  state.counter + Math.random();
            },
        }
    });


    // 把這個元件掛載到vue例項中之後
    // 每個vue的例項就會有一個 $store 的屬性
    const vue = new Vue({
        store: vuex,
        components: {
            calc,
            'other-component' : otherComponent,
        },
    }).$mount('#app');
</script>
</body>
</html>
複製程式碼

相關文章