Vuex

Vuex

   官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），

   让其在各个页面上实现数据的共享包括状态，并且可操作

   Vuex分成五个部分：

   1.State：单一状态树

   2.Getters：状态获取

   3.Mutations：触发同步事件

   4.Actions：提交mutation，可以包含异步操作

   5.Module：将vuex进行分模块

3. vuex使用步骤

  3.1 安装

      npm install vuex -S

       

  3.2 创建store模块，分别维护state/actions/mutations/getters

      store

  index.js

import Vue from 'vue'
import Vuex from 'vuex'
import state from './State'
import getters from './Getters'
import actions from './Actions'
import mutations from './Mutations'
Vue.use(Vuex)
const store = new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})
export default store

state.js

export default{
    resturantName:'憨批'
}

actions.js

export default {
    setResturantNameByAsync: (context, payload) => {
        console.log('xxxx');
        setTimeout(() => {
            console.log('yyyy');
            console.log(payload)
            context.commit('setResturantName', payload);
        }, 3000)
        console.log('zzzz');
    },
    doAjax: (context, payload) => {
        let _this=payload._this
        let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;
        _this.axios.post(url, {}).then((respose) => {
            console.log(respose);
        }).catch(function(error) {
            console.log(error);
        });
}

}

mutations.js

export default{
    setResturantName:(state,payload)=>{
        state.resturantName=payload.resturantName;
    }
}

getters.js

export default{
    getResturantName:(state)=>{
        return state.resturantName;
    }
}

VuexPage1.vue

<template>
    <div>
        <h1>页面1:欢迎来到{{msg}}</h1>
        <button @click="buy">第一次</button>
        <button @click="buyAsync">第二次</button>
        <button @click="doAjax">第三次</button>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        computed: {
            msg() {
                return this.$store.state.resturantName;
            }
        },
        methods: {
            buy() {
                this.$store.commit('setResturantName', {
                    resturantName: '怡宝'
                });
            },
            buyAsync() {
                this.$store.dispatch('setResturantNameByAsync', {
                    resturantName: '哇哈哈'
                });
            },
            doAjax() {
                this.$store.dispatch('doAjax', {
                    _this:this    
                });
            }
        }
    }
</script>

<style>
</style>

VuexPage2.vue

<template>
    <div>
        <h1>页面2:欢迎来到{{msg}}</h1>
    </div>
</template>

<script>
    export default {
        data() {
            return {

            };
        },
        computed: {
            msg() {
                return this.$store.getters.getResturantName;
            }
        }
    }
</script>

<style>
</style>