vuex的拆分使用（详细）模块化处理

baby张
3,762 阅读2分钟

你还不知道 vuex 如何使用？ vuex快速上手

当我们对vuex有了一定的了解之后发现随着项目越来越大， 将所有的store单一的存在一个js里显然维护和使用起来都不太方便， 这时候我们最好是将store拆分开，使state、getters、mutations、actions、都单独管理， 至于vuex提供的module，个人觉得层次多了页不太适合管理不推荐使用（个人见解） 一、安装好vue和vuex 用脚手架安装就好，不会的点一下

二、构建目录 在src目录下创建store文件夹,和六个js文件

文件名 用处
states.js 里面存放所有的state
getters.js 里面存放所有的state
mutations.js 里面存放所有的mutations
actions.js 里面存放所有的actions
types.js 里面存放所有的types，用来action和mutations的匹配
index.js 当然就是将上面的五个拆分的东西组合起来

在这里插入图片描述
三、目录文件拆分详细 states.js 项目中所有的共享state都放这儿

const state =  {
    count:0
}
export default state

getter.js

const getters =  {
    docount:(state,getters) => {
        return state.counts
    } 
}
export default getters

types.js

export const SET_COUMT = 'SET_COUMT'
export const SET_COUMT_ADD = 'SET_COUMT_ADD'
export const SET_COUMT_REDUCE = 'SET_COUMT_REDUCE'

mutations.js

import * as TYPES from './types';

const mutations = {
    [TYPES.SET_COUMT](state, v) {
        state.count = v;
    },
    [TYPES.SET_COUMT_ADD](state,v) {
        if(v){
            state.count += v
        }else{
            state.count ++
        }
    },
    [TYPES.SET_COUMT_REDUCE](state,v) {
        if(v){
            state.count -= v
        }else{
            state.count --
        }
       
    }
}
export default mutations

actions.js

import * as TYPES from './types';

const actions = {
    ADD1000(vuex) {
        // axios.get("/customer/user_info").then(res => {
        //     commit(TYPES.SET_COUMT, res.data);
        // });
        vuex.commit(TYPES.SET_COUMT_ADD, 1000);
    },
    REdUCE1000(vuex) {
        // axios.get("/customer/user_info").then(res => {
        //     commit(TYPES.SET_COUMT, res.data);
        // });
        vuex.commit(TYPES.SET_COUMT_REDUCE, 1000);
    }
}
export default actions

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import  state  from './states';
import  getters  from './getters';
import  mutations  from './mutations';
import  actions  from './actions';

Vue.use(Vuex)

export const store = new Vuex.Store({
        state,
        getters,
        mutations,
        actions,
    })

到这里就拆分完毕了，调用方法还是跟以前是一样的，只是这样更容易维护识别度高。

四、vuex使用 在main.js里引入store并初始化

在这里插入图片描述
下面只展示vuex辅助函数调用方法，原理和方法点击 ---> 了解vuex辅助函数调用方法mp.csdn.net/mdeditor/88…

<script>
import { mapState , mapMutations , mapActions , mapGetters  } from 'vuex';
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      counts:(state) => state.count
    }),
    ...mapGetters({
       getternum:'docount'
    })
  },
  methods:{
    ...mapMutations({
      addnum:'SET_COUMT_ADD',
      reducenum:'SET_COUMT_REDUCE'
    }),
    ...mapActions({
      addmore:'ADD1000',
      reducemore:'REdUCE1000'
    }),
    add(){
      this.addnum()
      console.log(this.counts,'+1')
    },
    reduce(){
      this.reducenum()
      console.log(this.counts,'-1')
    },
    add1000(){
      this.addmore()
      console.log(this.counts,'+1000')
    },
    reduce1000(){
      this.reducemore()
      console.log(this.counts,'-1000')
    }
  },
  
  mounted(){
    console.log(this.counts,this.$store.state.count,111111111)
  }
}
</script>

上面只展示vuex辅助函数调用方法，

avatar
文章
阅读
粉丝