Vuex学习总结(state,mutations,getters,action,modules)

Vuex介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
调试工具

项目目录

state

在state中定义的变量，每一个Vue组件都可访问
index.js中

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import getters from './getters'
import actions from './actions'
import personA from './modules/personA'
Vue.use(Vuex)
const state = {
  count: 0,
  students: [{
      name: 'tyh',
      age: 12
    },
    {
      name: 'xys',
      age: 15
    },
    {
      name: 'qwe',
      age: 17
    },
    {
      name: 'asd',
      age: 20
    },
  ]
}
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
  modules: {
    personA
  }
})

访问方式：

$store.state.count

mutations

mutations.js
mutations里面定义各种方法,组件中通过$store.commit()来提交

    add() {
      this.$store.commit("increment");
    }

export default {
  increment(state) {
    state.count++
  },
  decrement(state) {
    state.count--
  },
  incrementCount(state,count) {
    state.count += count
  },
  addStudents(state,message) {
    state.students.push(message)
  },
  updateInfo(state,name) {
    state.students.filter(s => s.name == name)[0].name = 'taoyuhan'
  },
  addInfo(state,message) {
    Vue.set(state.students[0],message.key,message.value)
  },
  updateM(state,obj) {
    Vue.set(state.students[0],obj.key,obj.value)
  }
}

getters

getters类似于组件当中的计算属性
getters.js

export default {
  moreAge(state) {
    return age => state.students.filter(item => item.age > age)
  }
}

访问方式

<h2>{{ $store.getters.moreAge(1) }}</h2>

actions

action里面主要进行异步操作，然后异步操作完成后提交到mutations里面
actions.js

export default {
  updateMessage(context,obj) {
    return new Promise((resolve,reject) => {
      setTimeout(() => {
        context.commit("updateM",obj)
        resolve("异步操作已完成")
      }, 3000);
    })
  }
}

提交到actions的方法
通过$store.dispatch()提交到mutations里面
注意：mutations里面不能处理异步操作，异步操作全部在actions里面处理完成后再通过context.commit()提交到mutations里面

    updatemessage() {
      this.$store.dispatch("updateMessage",this.obj).then(res => {
        console.log(res)
      })
    }

modules

modules里面可以分为几个模块，每个模块里面又有state,mutations…
personA.js

export default {
  state: {
    message: {
      name: '终端',
      age: '12'
    },
    numbers: 0
  },
  mutations: {
    addNumbers(state) {
      state.numbers++
    }
  },
  getters: {
    fullName(state) {
      return state.message.name + "aaa"
    }
  },
  actions: { //只提交给自己模块中的mutations
    updateNumbers(context) {
      setTimeout(() => {
        context.commit("addNumbers")
      }, 3000);
    }
  }
}

访问模块里面的message

<h1>{{$store.state.personA.message}}</h1>

提交方式不变，访问getters里面的也不变

附上App.vue的代码

<template>
  <div id="app">
    <div>
      <h1>{{ count }}</h1>
      <button @click="add">+</button>
      <button @click="sub">-</button>
      <button @click="addCount(5)">+5</button>
      <button @click="addStudent">添加一位学生</button>
      <button @click="update('tyh')">修改信息</button>
      <button @click="addInfo">添加地址</button>
      <button @click="updatemessage">异步修改信息</button>
      <h2>{{ $store.getters.moreAge(1) }}</h2>
      <h1>------------------modules---------------</h1>
      <h1>{{$store.state.personA.message}}</h1>
      <h1>{{$store.state.personA.numbers}}</h1>
      <h1>{{$store.getters.fullName}}</h1>
      <button @click="addnumbers">+</button>
      <button @click="updatenumbers">延迟+</button>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      obj: {
        key: "address",
        value: "wuhan",
      },
    };
  },
  computed: {
    count() {
      return this.$store.state.count;
    },
    studentInfo() {
      return {
        name: "uio",
        age: 20,
      };
    },
  },
  methods: {
    add() {
      this.$store.commit("increment");
    },
    sub() {
      this.$store.commit("decrement");
    },
    addCount(count) {
      this.$store.commit("incrementCount", count);
    },
    addStudent() {
      this.$store.commit("addStudents", this.studentInfo);
    },
    update(name) {
      this.$store.commit("updateInfo", name);
    },
    addInfo() {
      this.$store.commit("addInfo", this.obj);
    },
    updatemessage() {
      this.$store.dispatch("updateMessage",this.obj).then(res => {
        console.log(res)
      })
    },
    addnumbers() {
      this.$store.commit("addNumbers")
    },
    updatenumbers() {
      this.$store.dispatch("updateNumbers")
    }
  },
};
</script>

具体效果可自行演示：