【Vue 極速指南】Vuex 篇

dav2100發表於2021-09-09
Vue

在這篇文章，你將快速學習到：

  • 如何安裝

  • 什麼是 Vuex

  • Hello World

  • 核心概念

    • mapState Helper

    • mapState Helper

    • State

    • Getters

    • Mutations

    • Actions

    • Modules

如何安裝

  • 標準安裝

  • npm install vuex

什麼是 Vuex

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

Hello World

  • 引入 vue.js & vuex.js

  • 建立 index.html

  • 建立 Vuex.Store(): store = new Vuex.Store({})

  • 提交變化: store.commit('increment')

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Hello Vuex</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
    <script>
        var store = new Vuex.Store({            state: {                count: 0
            },            mutations: {                increment: function(state){
                    state.count++;
                }
            }
        });

        store.commit('increment');        console.log(store.state.count);    </script></body></html>

核心概念

State

  • 建立 Vuex.Store()

  • 定義 state.count: { state: { count: 0 }}

  • 在元件中使用: this.$store.state.count

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Vuex State</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
    <div id="app">
        {{ count }}    </div>
    <script>
        var store = new Vuex.Store({
            state: {
                count: 1
            }
        });        
        var app = new Vue({
            el: '#app',
            store: store,
            computed: {
                count: function(){                    return this.$store.state.count
                }
            }
        });    </script></body></html>

Getters

  • 建立 Vuex.Store()

  • 宣告 getters.doneTodos: { getters: { doneTodos: ... }}

  • 在元件中使用: this.$store.getters.doneTodos

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Vuex Getter</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
    <div id="app">
        {{ doneTodos }}    </div>
    <script>
        var store = new Vuex.Store({
            state: {
                todos: [
                    {id: 1, text: 'a thing', done: true },
                    {id: 2, text: 'B thing', done: false }
                ]
            },
            getters: {
                doneTodos: function(state){                    return state.todos.filter(function(todo){                        return todo.done;
                    });
                }
            }
        });        
        var app = new Vue({
            el: '#app',
            store: store,
            computed: {
                doneTodos: function(){                    return this.$store.getters.doneTodos
                }
            }
        });    </script></body></html>

Mutations

  • 建立 Vuex.Store()

  • 宣告 mutations.increment: { mutations: { increment: function(){} }}

  • 在元件中使用: this.$store.commit('increment')

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Vuex Mutation</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
    <div id="app">
        {{ count }}        <button @click="increment">increment</button>
    </div>
    <script>
        var store = new Vuex.Store({
            state: {
                count: 1
            },
            mutations: {
                increment: function(state) {
                    state.count++;
                }
            }
        });        
        var app = new Vue({
            el: '#app',
            store: store,
            computed: {
                count: function() {                    return this.$store.state.count
                }
            },
            methods: {
                increment: function() {                    this.$store.commit('increment');
                }
            }
        });    </script></body></html>

Actions

  • create Vuex.Store()

  • 宣告 actions.increment: { actions: { increment: function(){} }}

  • 在元件中使用: this.$store.dispatch('increment')

<!DOCTYPE html><html><head>
    <meta charset="utf8">
    <meta name="viewport" content="minimal-ui,width=device-width,initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
    <title>Vuex Action</title>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vue.js"></script>
    <script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="vuex.js"></script></head><body>
    <div id="app">
        {{ count }}        <button @click="increment">increment</button>
    </div>
    <script>
        var store = new Vuex.Store({
            state: {
                count: 1
            },
            mutations: {
                increment: function(state) {
                    state.count++;
                }
            },
            actions: {
                increment: function(context) {
                    context.commit('increment');
                }
            }
        });        
        var app = new Vue({
            el: '#app',
            store: store,
            computed: {
                count: function() {                    return this.$store.state.count
                }
            },
            methods: {
                increment: function() {                    this.$store.dispatch('increment');
                }
            }
        });    </script></body></html>

Modules

  • 建立 moduleA & moduleB

  • 在兩個模組中建立 Vuex.Store() : new Vuex.Store({modules: {a: moduleA,b: moduleB}})

  • 在元件中使用: this.$store.state.a

〖堅持的一俢〗





來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/4479/viewspace-2822797/，如需轉載，請註明出處，否則將追究法律責任。

相關文章