在这篇文章，你将快速学习到：

• 如何安装

• 什么是 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

〖坚持的一俢〗