zoukankan      html  css  js  c++  java
  • vuex之store拆分即多模块状态管理

    一般做项目的时候我们有公用的参数,还有各模块自己的参数

    一:首先是公用参数的拆分城四个JS

     然后states.js如下

    export default {
        count:0,
        name: '张三'
    }
    

    mutations.js如下

    export default {
        addName(state,obj){
            state.name=obj.name;
            state.count=obj.count;
        }
      }

    actions.js如下

    import axios from 'axios'
    export default {
        addNameAction({commit}){
            axios.get("http://localhost/ddd")
            .then(res=>{
                commit('addName',{name:res.data.name,count:res.data.count})
            }).catch(error=>{
                console.log(error)
            })
        }
    }

    接下来就是导入store.js如下

    import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
    import  '../mock.js'
    import state from './states.js'
    import mutations from './mutations.js'
    import actions from './actions.js'
    // Vue.prototype.$http=axios;
    Vue.use(Vuex);
    export default new Vuex.Store({
        state,
         mutations,
        actions
    })

    这样我们就完成了,vue调用还像之前的调用

    二:业务中一个模块的导入

    我们新建个modules的文件夹,然后再新建个JS,名字自己起,我就叫dataCenterChiren

     dataCenterChiren.js代码如下

    export default {
        state:{
            minority:"汉族"
        },
        mutatons:{},
        actions:{},
        getters:{}
      }

    store.js导入如下

     业务中vue调入是这么写的

     是不是如此简单,但是刚摸索还是折腾了一点时间的。O(∩_∩)O哈哈~

  • 相关阅读:
    leetcode 890. 查找和替换模式 Python
    TensorFlow-GPU+cuda8+cudnn6+anaconda安装遇到的版本错误
    leetcode 921. 使括号有效的最少添加(Python)
    BFC概念详解及应用
    做一个网页阅读百分比指示器
    margin-bottom和vertical-align的区别
    MD5算法
    Array.prototype.slice.call()方法详解
    String stringbuffer StringBuilder
    价值观
  • 原文地址:https://www.cnblogs.com/binmengxue/p/12206363.html
Copyright © 2011-2022 走看看