vuex基础

47 阅读1分钟

参考链接

blog.csdn.net/m0_70477767…

一个最基础的store结构

//定义公共数据
const state = {
    title:''
}

/**
 * 修改state中数据的唯一方式(类似于methods)
 * 保证修改来源唯一,便于调试和维护
 * 参数一state(必选),参数二为载荷(可选)
 * 通过this.$store.commit('mutations中定义的方法名',载荷)来调用
 * 必须是同步函数
 */
const mutations ={
    SET_TITLE: (state,title)=>{
        state.title = title
    }
}

/***
 * 可发起异步请求操作
 * 通过commit调用mutations中定义的方法修改数据state
 * 通过this.$store.dispatch('actions中定义的方法名',参数)来调用
 */
const actions = {
    setTitle({commit}, title){
        commit('SET_TITLE',title )
    }   
}

export default {
    //调用时需要加上命名空间 this.$store.state.app.xxx
    namespaced: true, 
    state,
    mutations,
    actions
}