【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