如何安裝

標準安裝
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

〖堅持的一俢〗

【Vue 極速指南】Vuex 篇

如何安裝

什麼是 Vuex

Hello World

核心概念

State

Getters

Mutations

Actions

Modules

相關文章