vuex划分模块module

责编:menVScode 2017-12-17 17:04 阅读(988)

Vuex核心概念

        store:类似容器,包含应用大部分状态; 一个页面只能只能有一个store;状态存储是响应式的;不能直接改变store中的状态,唯一途径显示的提交mutations。

        State:包含所有应用级别状态的对象

        Getter:在组件内部获取store中状态的函数

        Mutations:唯一修改状态的事件回调函数。

        Action:包含异步操作、提交mutation改变状态

        Modules:将store分割成不同的模块


没有划分前的代码

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100,
        title:'',
        list:[]
    },
    getters:{
        filterCount(state){
            return state.count>=120 ? 120 : state.count
        }
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        addNum(state,payload){
            state.count +=payload.n
        },
        minusNum(state,payload){
            state.count -= payload.min
        },
        getTitle(state,obj){
            state.title = obj.name
        },
        getList(state,list){
            state.list = list
        }
    },
    actions:{
        addAction({commit,dispatch}){//参数:对象,不是当前的store实例,context对象包含了当前实例的一些方法
            //console.log(context)
            setTimeout(()=>{ //模拟异步操作
                //改变状态,必须提交mutation
                commit('addNum',{n:5})
                dispatch('testAction',{test:1})
            },1000)
        },
        testAction(context,obj){
            console.log(obj)
        },
        getListAction({commit}){
            //发送请求
            axios.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate')
                .then((data)=>{
                    // console.log(data)
                    commit('getList',data.data.data) //拿到数据后,提交mutation,改变状态
                })
                .catch((error)=>{
                    console.log(error)
                })
        }
    }
})

export default store

        用划分模块module修改后的代码

        在子模块中状态方式:this.$store.state.selectModule.title;

        在子模块中有actions、mutations,他们都有改变状态的方法,他们都会去寻找当前模块的状态;

import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'

Vue.use(Vuex)

let selectModule = {
    state:{
        title:'',
        list:[]
    },
    getters:{
        filterCount(state){
            return state.count>=120 ? 120 : state.count
        }
    },
    mutations:{
        getTitle(state,obj){
            state.title = obj.name
        },
        getList(state,list){
            state.list = list
        }
    },
    actions:{
        getListAction({commit}){
            //发送请求
            axios.get('https://easy-mock.com/mock/5a361e643b8a9b34fc316389/example_1513496164192/selectDate')
                .then((data)=>{
                    // console.log(data)
                    commit('getList',data.data.data) //拿到数据后,提交mutation,改变状态
                })
                .catch((error)=>{
                    console.log(error)
                })
        }
    }
}

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100,
    },
    mutations:{//不能直接改变state中的状态,唯一途径显示的提交mutations
        addNum(state,payload){
            state.count +=payload.n
        },
        minusNum(state,payload){
            state.count -= payload.min
        } 
    },
    actions:{
        addAction({commit,dispatch}){//参数:对象,不是当前的store实例,context对象包含了当前实例的一些方法
            //console.log(context)
            setTimeout(()=>{ //模拟异步操作
                //改变状态,必须提交mutation
                commit('addNum',{n:5})
                dispatch('testAction',{test:1})
            },1000)
        },
        testAction(context,obj){
            console.log(obj)
        }
    },
    modules:{
        selectModule
    }
})
//在子模块中状态方式:this.$store.state.selectModule.title
//在子模块中有actions、mutations,他们都有改变状态的方法,他们都会去寻找当前模块的状态
export default store
标签: module vuex
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码