【Vue基础】Vuex的组成介绍

Vuex的组成介绍

State

• 数据唯一来源(数据源)，vuex所有的数据都会存在state中，就像一个很大的仓库，存储所有数据，可以实例化用来存储所有的数据，如何存储呢？实际上status就是一个庞大的对象，本身是一个json对象，用来存储所有的数据

Getter

• 获取数据。本来可以通过state实例化拿到所有数据，但是getter有其存在的道理，好比是vue的computed计算属性，相似性：从现有的state来派生出一个新的state，大大方便我们获取数据，或者state派生出新的状态的时候有很大的作用

Mutation

• 修改数据，不是通过直接修改，需要通过一个commit
  mutation来修改数据，mutation本质上就是一个function，为什么不能直接通过实例化state直接去给state里面的数据做修改，而是通过commit一个mutation，在通过mutation传入一个state，再对state进行修改呢？这里主要是因为，每次提交mutation，都会有一个记录，vue这样做是为了更方便的记录下每一个数据改变的历史和轨迹，方便于监听和回滚之类的操作。还需要注意一点，mutation的操作一定是同步的，写成异步会有很大的麻烦，具体看文档

Action

• 提交mutation，为什么会多出这个呢？实际上mutation是同步修改数据，而往往业务需求有很多的异步操作，来修改vuex的数据状态，action里面可以进行异步操作，因为我们提交的时候mutation，mutation是通过同步修改数据。Action相当于包装了一层，可以进行任意的异步编程。来提交mutation，在通过mutation同步修改数据

Modules

面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

const moduleA = { // 通过const来定义一个moduleA,再定义一个moduleB；每个模块都包括
 // stste,mutation,action,getters等一系列概念;
 // 只是说这些状态都是在A模块里面运用的；B模块里面也会应用到；但是如果我们的项目并不需要太多的状态管理；那么我们完全可以把它定义到vuex里面去；不需要进行拆分；
 // 只有在我们的页面里面概念比较多，而又不想和别的页面进行混淆的时候；
 // 大家可以把它拆分成每个模块
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
 
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
 
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
 
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

个人项目中Vuex的运用：

例子：

主模块：index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

//导入committee和volunteer
import committeeModule from '@/store/committee.js'
import volunteerModule from '@/store/volunteer.js'


//存放共有数据
var state = {
  leftArrow:false,//左上角返回按钮，默认不显示(首页，通告，我的)
  indexPage:'/volunteer',  //首页的uri,默认为志愿者页面
  announcePage:'/volunteer/announce', //通告的uri,默认志愿者节目
  personalPage:'/volunteer/personal',  //我的uri,默认志愿者节目
  title:'首页' //标题
}

var mutations = {
  setLeftArrow(state,val) { //是否显示返回按钮
    state.leftArrow = val
  },
  setIndexPage(state,uri) { //更换首页uri
    state.indexPage = uri
  },
  setAnnouncePage(state,uri) { //更换通告的uri
    state.announcePage = uri
  },
  setPersonalPage(state,uri) { //更换我的uri
    state.personalPage = uri
  },
  setTitle(state, val) { //设置当前标题
    state.title = val
  }
}

var actions = {}

//各自数据
var modules = {
    volunteer:volunteerModule,
    committee: committeeModule
}

var vuex = new Vuex.Store({
  state,mutations,actions,modules
})

export default vuex

子模块：volunteer.js

import api from '@/api/user/index'
import { Toast } from 'vant'

var state = {
    message: { //用户信息
        account: '获取中...',
        user_name: '获取中...',
        role: '获取中...',
        user_photo:'获取中...',
        user_sex:'获取中...',
        user_village:'获取中...'
    },
    announcesCol:[],  //返回通告列表--升序
    announces: [], //返回通告列表--降序
    currentannounce:{},//返回当前通告
    activitys: [], //获取活动老人信息--参与者模块
    isUpload:{}, //获取活动提交的状态值
    activityList:[], //获取一个用户所提交的所有活动
    activityNotive:[], //获取活动公告
    attentions:[], //获取志愿者注意事项
    approval:{} //获取当前通告点赞情况
}

var mutations = {
    setVolunteerMessage(state, msg) { //设置志愿者信息
        state.message = msg
    },
    vm_getAnnouncesCol:function(state,val){ //获取所有通告--升序
        state.announcesCol = val
    },
    vm_getAnnounces: function (state, val) { //获取所有通告--降序
        state.announces = val
    },
    vm_getCurrentAnnounce:function(state, val) { //获取当前通告
        state.currentannounce = val
    },
    vm_getActivity:function(state,val) { //获取活动老人信息--参与者模块
        state.activitys = val
    },
    vm_getIsUpload:function(state,val) { 
        state.isUpload = val
    },
    vm_getOneUserAllActivity:function(state,val) { //获取一个用户所提交的所有活动
        state.activityList = val
    },
    vm_getActivityNotive: function(state,val) { //获取活动公告
        state.activityNotive = val
    },
    vm_getAttention: function(state,val) { //获取志愿者注意事项
        state.attentions = val
    },
    vm_getOneApproval: function(state,val) { //获取当前通告点赞情况
        state.approval = val
    } 

}

var actions = {
    //获取通告列表--升序
    va_getAnnouncesCol:function({commit}) {
        api.getannouncescol().then(res => {
            commit('vm_getAnnouncesCol', res.announces)
        })
    },
    //获取通告列表--降序
    va_getAnnounces: function ({commit}) {
        api.getannounces().then(res => {
            commit('vm_getAnnounces', res.announces)
        })
    },
    //获取当前通告
    va_getCurrentAnnounce:function ({commit}, params) {
        api.getcurrentannounce(params).then(res => {
            commit('vm_getCurrentAnnounce',res.announce)
        })
    },
    //获取活动与老人信息
    va_getActivity:function({commit}, params) {
        api.getallactivity().then(res => {
            commit('vm_getActivity', res.activities)
        })
    },
    //参与活动
    va_postParticipantActivity:function({commit}, params) {
        api.postparticipantactivity(params).then(res => {
            commit('vm_getIsUpload', res)
            if(res.code == -1){
              Toast(res.message);
            }else if(res.code == 1){
              Toast(res.message);
            }
        })
    },
    //获取个人提交的未审核的活动--申请记录
    va_getuseractivity:function({commit},params) {
        api.getuseractivity(params).then(res => {
            commit('vm_getOneUserAllActivity', res.activities)
        })
    },
    //取消报名/参与活动
    va_deleteapplicationactivity:function({commit},params) {
        api.deleteapplicationactivity(params).then(res => {
            commit('vm_getIsUpload', res)
            if(res.code == 1){
                Toast(res.message)
            }
        })
    },
    //获取活动公告
    va_getactivitynotive:function({commit}) {
        api.getactivitynotive().then(res => {
            if(res.code == 1){
                commit('vm_getActivityNotive', res.message.slice(0,3))
            }
        })
    },
    //获取志愿者注意事项
    va_getattention:function({commit}) {
        api.getattention().then(res => {
            if(res.code == 1){
                commit('vm_getAttention', res.message)
            }
        })
    },
    //点赞
    va_postapproval:function({commit}, params) {
        api.postapproval(params).then(res =>{
            commit('vm_getOneApproval', res.approval)
            if(res.code == 1){
                Toast(res.message)
            }
        })
    },
    //获取当前通告点赞情况
    va_getoneapproval:function({commit}, params) {
        api.getoneapproval(params).then( res => {
            if(res.code == 1) {
                commit('vm_getOneApproval', res.approval)
            }else if(res.code == -1) {
                commit('vm_getOneApproval', res.approval)
            }
        })
    },
    //取消点赞
    va_putapproval: function ({ commit }, params) {
        api.putapproval(params).then(res => {
            commit('vm_getOneApproval', res.approval)
            if (res.code == 1) {
                Toast(res.message)
            }
        })
    },
}

export default {
    state, mutations, actions
}

子模块committee.js

var state = {
    committee:{}  //获取登录村委的信息
}

var mutations = {
    
    hm_getCommittee:function (state , val) { //修改vuex中committee的数据
        state.committee = val

    }

}

var actions = {

     ha_getCommittee:function({commit}, committee){
        commit('hm_getCommittee',committee)
     }

}


export default {
    state, mutations,actions
}