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

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

• 博客连接：blog.csdn.net/weixin_4364…
• 掘金连接：juejin.im/editor/post…

---

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

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

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

3、目录文件拆分详细 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,
    })

复制代码

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

4、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辅助函数调用方法，

• 原理和方法点击 ---> 了解vuex辅助函数调用方法mp.csdn.net/mdeditor/88…

• 不想复制粘贴的直接去github:github.com/babybrother…