Vuex的基本使用

官方文档

https://vuex.vuejs.org/zh/installation.html

vuex 是什么

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.

为什么要使用vuex

vux 可以解决多个组件之间的通信问题

vuex 基本了解

容器(store): 用于存储状态的
状态(state): 多个组件需要共享的数据(就可以称之为状态)
突变(mutations): 由于单向数据流的关系,如果组件需要修改容器中的状态,就必须通过mutations 可以将这个mutation理解为一个状态管理员, 组件想要修改状态就必须告诉管理员, 由管理员来决定是否更改数据,需改数据的规则, 如下图所示

vuex

此处的状态可以简单的理解为需要被多个组件共享的数据

getter

有时候我们需要根据store中的state的数据进行过滤加工,就需要使用 getter, 例如对数组进行过滤,然后产生一个新的数组展示到页面中, 比如脏话(字符串)过滤.... 我们可以将vux中的 getter 理解为 vue实例的计算属性

基本使用

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vuex study</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vuex/dist/vuex.js"></script>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .current{
            line-height: 100px;
            text-align: center;
            background: #000;
            color: deepskyblue;
            font-size: 30px;
        }
        .other{
            background: #888888!important;
        }
        .btns {
            text-align: center;
            margin: 30px 0;
        }
        .btns button{
            border: none;
             120px;
            line-height: 30px;
            background: #000;
            color: deepskyblue;
        }
    </style>
</head>
<body>

<div id="app">
    <calc></calc>
    <other-component></other-component>
</div>


<template id="calc">
    <div>
        <p class="current">现在的状态: {{$store.state.counter}} </p>
        <p class="btns"> <button @click="inc">加</button> <button @click="dec">减</button> </p>
    </div>
</template>

<template id="other">
    <div>
        <p class="current other">其他组件中的状态: {{$store.state.counter}} </p>
        <p class="current other">在其他组件中使用getter属性: {{$store.getters.computeCounter}} </p>
    </div>
</template>


<!-- javascript -->
<script>
    let otherComponent = Vue.extend({
        template: '#other',
    });

    let calc = Vue.extend({
        template: '#calc',
        methods: {
            inc () {
                // 当点击"加"的按钮式就触发这个函数,提交一个 increment 的 mutation
                this.$store.commit('increment', 2);
            },
            dec () {
                // 当点击"减"的按钮式就触发这个函数,提交一个 decrement 的 mutation
                this.$store.commit('decrement', 3);
            }
        },
    });


    /**
     * 因为容器只有一个所以 vuex 的实例也必须只有一个
     * 所以,建议使用 const 关键字来定义
     */
    const vuex = new Vuex.Store({
        state: {
            counter: 0,
        },
        // 开启严格模式,开启严格模式后,必须通过 mutation 来修改状态
        strict: true,
        mutations: {
            // state 是默认传递的参数,可以直接使用,
            increment(state, size){
                state.counter += size;
                if (state.counter >= 10) {
                    state.counter  = 10;
                }
            },
            decrement(state, size){
                state.counter -= size;
                if (state.counter <= 0){
                    state.counter  = 0;
                }
            }
        },
        getters: {
            computeCounter: state => {
                return  state.counter + Math.random();
            },
        }
    });


    // 把这个组件挂载到vue实例中之后
    // 每个vue的实例就会有一个 $store 的属性
    const vue = new Vue({
        store: vuex,
        components: {
            calc,
            'other-component' : otherComponent,
        },
    }).$mount('#app');
</script>
</body>
</html>