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
}