【Vuex 极速指南】

2019-04-04 本文已影响22人一俢

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

如何安装
什么是 Vuex
Hello World
核心概念
- State
  - mapState Helper
- Getters
  - mapState Helper
- 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 src="vue.js"></script>
    <script src="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 src="vue.js"></script>
    <script src="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 src="vue.js"></script>
    <script src="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 src="vue.js"></script>
    <script src="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 src="vue.js"></script>
    <script src="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

〖坚持的一俢〗

【Vuex 极速指南】

如何安装

什么是 Vuex

Hello World

核心概念

State

Getters

Mutations

Actions

Modules

猜你喜欢

热点阅读