Vue中状态管理器(vuex)详解以及实际应用场景

Vue中状态管理器(Vuex)详解以及实际应用场景

一、什么是Vuex

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

二、Vuex的核心概念

State 状态： 在store中存储数据的对象。在组件内部通过$store.state.xxx或mapState获取数据。
Getter获取器： 在store中提供了一种将状态映射为计算属性的方法，即Getter。可以在组件内部通过$store.getters.xxx或mapGetters获取。
Mutation突变： 改变store中状态的唯一方法，但是仅仅是同步改变，因此不能写异步操作。在组件内部调用$store.commit('XXX',params)来触发Mutation的执行。
Action行动： 异步操作 or 复杂操作的函数，在组件内部调用$store.dispatch('XXX',params)来触发Action的执行。Action中可以触发Mutation的执行。
Module： 将store分割成模块，每个模块具有自己的state, mutation, action, getters。

三、Vuex详细实现

1.安装Vuex

使用npm或者yarn进行安装。

//使用npm安装
npm install vuex --save 

//使用yarn安装
yarn add vuex

2.注册store

在Vue应用程序中注册store，关于store的注册，我们应该将状态、mutations、actions、getters分别拆分到单独的文件中，按模块划分，方便维护。

//store.js文件
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const state = {
    count: 1
}

const mutations = { 
    add(state){   
        state.count++;
    },
    reduce(state){
        state.count--;
    }
}

const actions = {   
    addAction(context){   
        context.commit('add');
    },
    reduceAction({commit}){    
        commit('reduce');
    }
}

const getter = {
    getCount(state){
        return state.count;
    }
}

export default new Vuex.Store({
    state,mutations,actions,getter
});

3.使用Vuex

在根组件中将store绑定到Vue，使用$store.commit/ dispatch/ state/ getters来调用。

//main.js文件
import Vue from 'Vue'
import App from './App.vue'
import store from './store.js'

new Vue({
    el: '#app',
    store,   //将store注入根组件
    render: h => h(App)
});

//Example1.vue文件

<template>
    <div>
        <button @click="add">点击增加</button>
        <button @click="reduce">点击减少</button>
        <div>count{{count}}</div>
    </div>
</template>

<script>
    import { mapState,mapGetters,mapMutations,mapActions } from 'vue';
    export default {
        computed: {
            ...mapState([
                'count'
            ]),
            ...mapGetters([
                'getCount'
            ])
        },
        methods: {
            ...mapMutations([
                'add',
                'reduce'
            ]),
            ...mapActions([
                'addAction',
                'reduceAction'
            ])
        }
    }
</script>

4.命名空间

当store中模块化的数据过多时，可能会出现命名冲突的问题，Vuex提供了命名空间的方式来避免这种问题。

//navbar.js 文件
const navbar = { 
    state:{
        username: 'John' 
    },
    mutations:{ ... },
    actions:{ ... },
    getters:{
        getUsername(state,getters,rootState){ 
            return state.username;
        }
    }
}
export default navbar;

//store.js文件
import navbar from './navbar.js';

export default new Vuex.Store({
    modules: {
        navbar: navbar,
    }
})

当使用命名空间时，得注意在方法访问时，应该在组件中传入参数{root: true}，来使其找到正确的命名空间store。

示例代码如下：

<button @click="$store.commit('navbar/add',null,{ root: true })">+</button>

5.异步操作

如果想要执行异步操作的方法，可以使用actions，并进行封装，最后在mutations中进行数据操作。

示例代码如下：

//store.js文件
const actions = {
    async getMarket({ commit }) {
        const res = await api.getMarket();
        commit('setMarket',res.data);
    }
}

const mutations = {
    setMarket(state, market) {
        state.market = market;
    }
}

示例代码2：

//store.js文件
const actions = {
    getMovies({ state, commit }) {
        return new Promise((resolve, reject) => {
            Vue.http.get(`${state.baseUrl}/in_theaters?start=0&count=10`)
                .then(res => {
                    let movies = res.body.subjects.map(item => ({
                        title: item.title,
                        imgUrl: item.images.small
                    }));
                    commit('setMovies', movies);
                    resolve();
                }, err => {
                    reject(err);
                });
        });
    }
}

const mutations = {
    setMovies(state, movies) {
        state.movies = movies;
    }
}