VUE-X 辅助函数用法及分模块使用vuex

1.VUE-X辅助函数用法:

App.vue内容:

store下index.js内容:

/* import { set } from 'core-js/core/dict'; */

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态,

并以相应的规则保证状态以一种可预测的方式发生变化。 */

/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 */

/* 导出一个Vuex实例化对象 */

export default new Vuex.Store({

  /* state是用来存储组件中的数据的 */

  state: {

    msg: '我是组件共享的数据',

    num: 0,

    list: [{

        "title": "某xxxx去了学校1",

        "dec": "xxxxxxx学习了vue学习了java",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校2",

        "dec": "xxxxxxx学习了vue学习了javaScript",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校3",

        "dec": "xxxxxxx学习了vue学习了云计算",

        "xueli": "大专"

      },

      {

        "title": "某xxxx去了学校4",

        "dec": "xxxxxxx学习了vue学习了前端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校5",

        "dec": "xxxxxxx学习了vue学习了后端",

        "xueli": "本科"

      },

      {

        "title": "某xxxx去了学校6",

        "dec": "xxxxxxx学习了vue学习了大数据",

        "xueli": "本科"

      }

    ]

  },

  /* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */

  /* 类似于计算属性 */

  getters: {

    /* 计算大专学历的数据 */

    getDaZhuan: function (state) {

      return state.list.filter(r => r.xueli == '大专')

    },

    /* 计算本科学历的数据 */

    getBenKe: function (state) {

      return state.list.filter(r => r.xueli == '本科')

    },

    /* 说明也具有缓存功能 如果state中的数据得到了改变

        那么getters中的属性也会发生改变,如果state的值没有发生任何变化,那么getters

        中的属性的值就不会发生改变*/

    getRandom:function(state){

       return state.num +'--'+ Math.random()

    }

  },

  /* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */

  mutations: {

    /* 在mutations里面写异步就会造成数据混乱的问题 */

    /* mutations 的方法最好大写,为了和actions方法做区分 */

    /* mutations 通过payload来获取 */

    ADDNUM: function (state, payload) {

      console.log('ADDNUM', state);

      /* 模拟后台获取数组的异步场景 */

      /* setTimeout(()=>{

        state.num+=payload

      },500) */

      /* state.num++ */

      state.num += payload

    },

    DELNUM: function (state, payload) {

      console.log('DELDNUM', state);

      /* state.num-- */

      state.num -= payload

    },

  },

  /* actions是用来调后台接口的并commit提交一个mutations */

  actions: {

    /* actions里面的方法小写为了区分mutations里面的方法 */

    /* 异步请求要放 actions 里面去写 不要放组件写*/

    addajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        /* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */

        commit('ADDNUM', data)

      }, 500)

    },

    delajax: function ({

      commit

    }, data) {

      setTimeout(() => {

        /* 使用解构出来的commit方法来提交一个mutations方法ADDNUM来修改state中的值 */

        commit('DELNUM', data)

      }, 500)

    },

  },

  /* 可以使用modules把vuex分模块 */

  modules: {}

})

2.分模块使用vuex:

app.vue内容:

store新建modules文件创建ModA.js文件:

/* 模块的局部状态 */

/* 箭头函数如果想返回对象需要使用()包一下不能直接返回{} */

const state = ()=>({

    modaStr:'我是模块A的数据'

  })

  /* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */

  /* 类似于计算属性 */

  const getters= {

    strGetter:function(state){

        console.log(state);

      return state.modaStr + 'getter'

    }

  }

  /* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */

  const mutations= {

   CHANGESTR(state,payload){

    state.modaStr = payload

   }

  }

  /* actions是用来调后台接口的并commit提交一个mutations */

  const  actions= {

    waitfnStr({commit},data){

        setTimeout(()=>{

            commit('CHANGESTR',data)

        },1000)


    }

  }

  /* 可以使用modules把vuex分模块 */

  const modules={


  }

  export default {

      /* 保证模块之间的数据独立运行,不互相影响 */

      namespaced:true,

      state,

      getters,

      mutations,

      actions,

      modules

  }

store新建modules文件创建ModB.js文件:

const state = ()=>({

    modbStr:'我是模块B的数据'

  })

/* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */

/* 类似于计算属性 */

const getters= {


}

/* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */

const mutations= {


}

/* actions是用来调后台接口的并commit提交一个mutations */

const  actions= {


}

/* 可以使用modules把vuex分模块 */

const modules={


}

export default {

    /* 保证模块之间的数据独立运行,不互相影响 */

    namespaced:true,

    state,

    getters,

    mutations,

    actions,

    modules

}

store下index.js文件:

/* import { set } from 'core-js/core/dict'; */

import Vue from 'vue'

import Vuex from 'vuex'

/* 先把各个模块导入进来 */

import modA from '@/store/modules/ModA.js'

import modB from '@/store/modules/ModB.js'

Vue.use(Vuex)

/* Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。

它采用集中式存储管理应用的所有组件的状态,

并以相应的规则保证状态以一种可预测的方式发生变化。 */

/* 如果需要构建一个中单行单页应用,灰考虑如何更好的在组件外部管理状态,

   Vuex将会成为自然而然的选择 */

/* 导出一个Vuex实例化对象 */

export default new Vuex.Store({

  /* state是用来存储组件中的数据的 */

  state: {


  },

  /* getters计算组件中的数据的,可以对数据进行二次加工类似于computer功能 */

  /* 类似于计算属性 */

  getters: {


  },

  /* 在mutations中修改state中的值(修改state中的值要想留下记录必须用mutations修改) */

  mutations: {


  },

  /* actions是用来调后台接口的并commit提交一个mutations */

  actions: {


  },

  /* 可以使用modules把vuex分模块 */

  /* 分模块实现数据集中管理 */

  /* 在 modules 中把模块名注释一下*/

  modules: {

   modA:modA,

   modB:modB

  }

})

效果图:


你可能感兴趣的:(VUE-X 辅助函数用法及分模块使用vuex)