Vue.js 2.x笔记：状态管理Vuex（7）

　　Vuex是为vue.js应用程序开发的状态管理模式，解决的问题：

　　　　◊ 组件之间的传参,多层嵌套组件之间的传参以及各组件之间耦合度过高问题

　　　　◊ 不同状态中的行为需要多份复制的问题

　　Vuex采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　核心思想：抽取组件的共享状态，以一个全局单例的模式进行管理。

　　核心：store（仓库）

　　核心组成：

　　　　◊ state：存放项目中需要多组件共享的状态变量

　　　　◊ getters：读取器，从state中派生出状态，如：将state中的某个状态进行过滤然后获取新的状态。

　　　　◊ mutations：修改器，存放更改state里状态的方法。

　　　　◊ actions：动作，mutation的加强版，可以通过commit mutations中的方法来改变状态，最重要的是可以进行异步操作。

　　　　◊ modules：模块化，将状态和管理规则模块化封装。

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

2. Vuex基本使用

2.1 State

　　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示例：

　　 Vue.js 2.x笔记：状态管理Vuex（7）

　　/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