vuex状态管理模式架构

川长思鸟来 2022-01-31 17:39 329阅读 0赞

# vuex的原理： #

> Vuex 全局维护着一个对象，使用到了单例设计模式。在这个全局对象中，所有属性都是响应式的，任意属性进行了改变，都会造成使用到该属性的组件进行更新。并且只能通过 `commit` 的方式改变状态，实现了单向数据流模式。
> 
> state-> mutation-> action -> 更新渲染

# **vuex的优点：** #

最主要解决了组件之间共享同一状态(数据变量)的问题。可以把组件的共享状态提取出来，作为全局来管理。

(否则依靠on和dispatch,props 只能进行父子组件间的数据传递) 父子/同级/跨级

# Vuex应用场景？ #

如果不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，最好不要使用 Vuex。一个简单的 global event bus 就足够您所需了。但是，如果您需要构建是一个中大型单页应用，很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。

# **Vuex核心** #

每一个Vuex应用的核心就是store(仓库), store是保存应用中大部分的状态。

结构 新建一个store文件夹，里面新建 index.js ，types.js ，state.js ，getters.js ， mutations.js ， actions.js

**store/index.js **

import Vue from 'vue';
    import Vuex from 'vuex';
    import state from './state';
    import mutations from './mutations';
    import actions from './actions';
    import getters from './getters';
    Vue.use(Vuex);
    
    export default new Vuex.Store({
        state,
        getters,
        mutations,
        actions
    })

**store/types.js**

//getters types
    export const GET_THEMES = 'GET_THEMES';
    
    //actions types
    export const FETCH_THEMES = 'FETCH_THEMES';
    
    //mutations types
    export const MODIFY_THEMES = 'MODIFY_THEMES';

**store/state.js**

export default {
        themes: []
    }

**store/getters.js**

import * as types from './types';
    export default {
        [types.GET_THEMES]: state => {
            return state.themes
        }
    }

**store/mutations.js**

import * as types from './types';
    export default {
        [types.MODIFY_THEMES](state, all) {
            state.themes = all
        }
    }

**store/actions.js**

import axios from "axios";
    import * as types from './types';
    const baseURL = '/api/';
    export default {
        [types.FETCH_THEMES]({commit}) {
            axios.get(baseURL + "themes").then(res => {
                commit(types.MODIFY_THEMES, res.data.others)
                //commit(types.MODIFY_THEMES, res.data.others)可进行多个改变
            }).catch(err => console.log(err))
        }
    }

# 使用方法 #

（如何在组件中绑定事件）

① 获取变量值

import { mapGetters } from "vuex";
    
    computed: {
        ...mapGetters(["GET_THEMES", "GET_RECOMMENDLIST", "GET_ISLOADING"])
    }

这样就可以在组件中直接使用变量GET\_THEMES（return state.themes)

② 触发mutations，同步改变变量值

this.$store.commit("MODIFY\_ISLOADING",newValue);

③ 触发actions,异步改变变量值

this.$store.dispatch("FETCH\_THEMES");

# 其他组件间通信方式： #

① 父传子：props

② 子传父：通过 this.$emit 触发事件， this.$on 监听事件

③ 非父子：中央事件总线 ，然后通过 bus.$emit 触发事件，bus.$on 监听触发的事件。

Vue.component('brother1',{
            data(){
                return {
                    mymessage:'hello brother1'
                }
            },
            template:`
                <div>
                    <p>this is brother1 compoent!</p>
                    <input type="text" v-model="mymessage" @input="passData(mymessage)"> 
                </div>
            `,
            methods:{
                passData(val){
                    //触发全局事件globalEvent
                    bus.$emit('globalEvent',val)
                }
            }
        })
        Vue.component('brother2',{
            template:`
                <div>
                    <p>this is brother2 compoent!</p>
                    <p>brother1传递过来的数据：{
       {brothermessage}}</p>
                </div>
            `,
            data(){
                return {
                    mymessage:'hello brother2',
                    brothermessage:''
                }
            },
            mounted(){
                //绑定全局事件globalEvent
                bus.$on('globalEvent',(val)=>{
                    this.brothermessage=val;
                })
            }
        })
        //中央事件总线
        var bus=new Vue();
    
        var app=new Vue({
            el:'#app',
            template:`
                <div>
                    <brother1></brother1>
                    <brother2></brother2>
                </div>
            `
        })

# **结束** #

如果文章对你有帮助，麻烦点赞哦！一起走码农花路~

![20190510130531760.jpg][]

[20190510130531760.jpg]: /images/20220131/95460d763b3347d09a22cb8b3af69c15.png