Vue.js 2.x筆記：狀態管理Vuex（7）

libingql發表於2018-06-25
Vue.js筆記

1. Vuex簡介與安裝

1.1 Vuex簡介

　　Vuex是為vue.js應用程式開發的狀態管理模式，解決的問題：

　　　　◊ 元件之間的傳參,多層巢狀元件之間的傳參以及各元件之間耦合度過高問題

　　　　◊ 不同狀態中的行為需要多份複製的問題

　　Vuex採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

　　核心思想：抽取元件的共享狀態，以一個全域性單例的模式進行管理。

　　核心：store（倉庫）

　　核心組成：

　　　　◊ state：存放專案中需要多元件共享的狀態變數

　　　　◊ getters：讀取器，存放更改state裡狀態的方法

　　　　◊ mutations：修改器，從state中派生出狀態，如：將state中的某個狀態進行過濾然後獲取新的狀態。

　　　　◊ actions：動作，mutation的加強版，可以通過commit mutations中的方法來改變狀態，最重要的是可以進行非同步操作。

　　　　◊ modules：模組化，將狀態和管理規則模組化封裝。

　　　　

　　Vuex文件：https://vuex.vuejs.org/zh/

1.2 Vuex安裝

　　npm安裝：

npm install vuex -S

　　基礎示例：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>libing.vue</title>

    <script src="node_modules/vue/dist/vue.min.js"></script>
    <script src="node_modules/vuex/dist/vuex.min.js"></script>
</head>

<body>
    <div id="app">
        Copyright &copy; {{ author }} - 2018 All rights reserved
    </div>

    <script>
        Vue.use(Vuex);

        const store = new Vuex.Store({
            // 定義狀態
            state: {
                //key: value
                author: 'Libing'
            }
        });

        new Vue({
            el: "#app",
            store: store,
            computed: {
                author: function () {
                    return this.$store.state.author
                }
            }
        });
    </script>
</body>

</html>

　　vue-cli示例：

　　

　　/store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
    // 定義狀態
    state: {
        //key: value
        author: 'libing'
    }
})

　　HelloWorld.vue

<template>
    <div>Copyright &copy; {{ author }} - 2018 All rights reserved</div>
</template>

<script>
export default {
    name: "HelloWorld",
    computed: {
        author: function() {
            return this.$store.state.author;
        }
    }
};
</script>
<template>
    <div id="app">
        <HelloWorld/>
    </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";

export default {
    name: "App",
    components: {
        HelloWorld
    }
};
</script>
App.vue

　　main.js

import Vue from 'vue'
import App from './App'

import store from './store/index'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    store,
    components: {
        App
    },
    template: '<App/>'
})

相關文章