Vue.js 2.x笔记：状态管理Vuex（7）-优快云博客

本文介绍Vue.js应用程序的状态管理模式Vuex，解决组件间传参及状态管理复杂性等问题。通过集中式存储管理所有组件状态，确保状态变化的可预测性。

1. Vuex简介与安装

1.1 Vuex简介

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

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

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

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

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

　　核心：store（仓库）

　　核心组成：

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

　　　　◊ getters：读取器，存放更改state里状态的方法

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

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

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

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

1.2 Vuex安装

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

　　/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

　　main.js

import Vue from 'vue'
import App from './App'

import store from './store/index'

Vue.config.productionTip = false

new Vue({
    el: '#app',
    store,
    components: {
        App
    },
    template: '<App/>'
})

转载于:https://www.cnblogs.com/libingql/p/9224333.html