Vuex的使用教程

Vuex 是什么？

官方：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

个人理解：加入vuex会使项目变得更加复杂，遇到组件间频繁通信时，需要在组件外部管理状态时，vuex会让开发更加便捷。

安装vuex

npm i vuex --save

制作一个简单的计数应用

src/

新建 store/modules/Add.js

export const Add = {
    state:{
        count:0
    },

    mutations:{
        increment(state) {
            state.count++;
        },

        decrement(state) {
            state.count--;
        }
    },

    actions:{
        increment: ({commit}) => commit('increment'),

        decrement: ({commit}) => commit('decrement'),

        incrementIfOdd({commit,state}){
            if ((state.count + 1) % 2 === 0) {
                commit('increment');
            }
        },

        incrementAsync({commit}) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    commit('increment');
                    resolve();
                },1000);
            })
        }

    }
};

src/store

新建store.js

import Vue from 'vue';
import Vuex from 'vuex';
import {Add} from './modules/Add.js';

Vue.use(Vuex);

export const store = new Vuex.Store({
    modules:{
        Add
    }
});

src/main.js修改为

import Vue from 'vue';
import App from './app';
import {router} from './router.js'
import {store} from './store/store';

new Vue({
    el: '#app',
    router,
    store,
    render: h => h(App)
}).$mount('#main');

src/components/first.vue修改为

<template>
    <div id="first">
        <mainHeader></mainHeader>
        <div class="main">这里是first</div>
        <div class="count">
            {{$store.state.Add.count}}
        </div>
        <div class="button">
            <button @click="increment">Add</button>
            <button @click="decrement">Dec</button>
            <button @click="incrementIfOdd">AddIfOdd</button>
            <button @click="incrementAsync">AddSync</button>
        </div>
        <div class="main-link">
            <router-link to="/first">Go to first</router-link>
        </div>
        <div class="main-link">
            <router-link to="/second">Go to second</router-link>
        </div>
        <mainFooter></mainFooter>
    </div>
</template>
<script>
    import * as main from '../main/main'; //导入刚才注册的两个模块
    import { mapActions } from 'vuex'; //导入actions
    export default{
        name:'first',

        methods:{
            ...mapActions([
                'increment', // 映射 this.increment() 为 this.$store.dispatch('increment')
                'decrement',
                'incrementIfOdd',
                'incrementAsync'
            ])
        },

        components:{ //注册组件为当前模块的子模块
            mainHeader:main.header,
            mainFooter:main.footer
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    .main{
        text-align: center;
        font-size:16px;
        margin: 50px;
    }
    .count{
        font-family:"Microsoft YaHei UI";
        text-align: center;
        font-size:30px;
    }
    .button{
        .count;
    }
</style>

src/components/seconds修改为

<template>
    <div id="second">
        <mainHeader></mainHeader>
        <div class="main">这里是second</div>
        <div class="count">
            {{$store.state.Add.count}}
        </div>
        <div class="main-link">
            <router-link to="/first">Go to first</router-link>
        </div>
        <div class="main-link">
            <router-link to="/second">Go to second</router-link>
        </div>
        <mainFooter></mainFooter>
    </div>
</template>
<script>
    import * as main from '../main/main'; //导入刚才注册的两个模块
    export default{
        name:'second',

        components:{ //注册组件为当前模块的子模块
            mainHeader:main.header,
            mainFooter:main.footer
        }
    }
</script>

<style lang="less" scoped rel="stylesheet/less" type="text/css">
    .main{
        text-align: center;
        font-size:16px;
        margin: 50px;
    }
    .count{
        font-family:"Microsoft YaHei UI";
        text-align: center;
        font-size:30px;
    }
</style>

现在进入页面 然后测试四个按钮，同时切换到second路由，会发现组件通信已经完成了

vuex在处理组件之间的通信和状态管理上，是非常好用的，具体请参照文档。

• vuex官方文档