目录
一、Vuex是干什么的
二、Vuex状态管理核心
（1）State
（2）Getter
（3）Mutation
（4）Action
一、Vuex是干什么的
vuex的出现就是为了更加方便地管理组件之间的数据交互，他就是一个状态管理模式。Vuex的核心我们最常用的有四个：State，Getter，Mutation，Action。
二、Vuex状态管理核心
（1）State
State是状态，储存组件中的数据 ，如下代码。
//Homeview.vue<template><div class="home">//使用如下方式读取state中的数据<p>cou={{ $store.state.cou }}</p></div></template>//store中的index.js 也就是vuex的配置文件import { createStore } from 'vuex'export default createStore({state: {cou: 120},getters: {},mutations: {},actions: {},modules: {}})
（2）Getter
Getter的作用就是过滤数据，具体我们看下面的代码展示。
//Home.view<template><div class="home"><p>cou={{ $store.getters.guo }}</p></div></template>//vuex的配置文件 store下的index.jsimport { createStore } from 'vuex'export default createStore({state: {cou: 12},getters: {//函数名字自己取guo(state) {//cou小于100无法显示if (state.cou > 100) {return cou;} else {return '数据异常，无法显示';}}},mutations: {},actions: {},modules: {}})
（3）Mutation
Mutation可以帮助我们更改store中的状态，它类似是一个事件，每个mutation都有一个回调函数，这个回调函数就是实际进行状态更改的地方，他会接收state为第一个参数。具体看代码展示。
//vuex的配置文件import { createStore } from 'vuex'export default createStore({state: {cou: 12},getters: {//函数名字自己取guo(state) {if (state.cou > 100) {return cou;} else {return '数据异常，无法显示';}}},mutations: {setcou1(state, n) {state.cou += n;},setcou2(state, n) {state.cou -= n;}},actions: {},modules: {}})//Homeview.vue<template><div class="home"><p>cou={{ $store.state.cou }}</p><button @click="handle1">点我加10</button><button @click="handle2">点我减十</button></div></template><script>// @ is an alias to /srcexport default {name: 'HomeView',methods:{handle1(){this.$mit("setcou1",10);},handle2(){this.$mit("setcou2",10);}}}</script>
（4）Action
Action与Mutation其实你可以理解成一样，不过需要记住Action实现的是异步操作，比如说放个网络请求，你只能将它放在Action中
//配置文件import { createStore } from 'vuex'import axios from 'axios';export default createStore({state: {cou: 12},getters: {//函数名字自己取},mutations: {setcou1(state, n) {state.cou += n;},setcou2(state, n) {state.cou -= n;}},actions: {yibu({ commit }) {//第一个参数写对应的网址即可axios.get("").then(res => {commit("setcou1", res.data[0]);})}},modules: {}})//Homeview.vue<template><div class="home"><p>cou={{ $store.state.cou }}</p><button @click="handle1">点我加10</button><button @click="handle2">点我减十</button><button @click="yibucaozuo">异步操作</button></div></template><script>// @ is an alias to /srcexport default {name: 'HomeView',methods:{handle1(){this.$mit("setcou1",10);},handle2(){this.$mit("setcou2",10);},yibucaozuo(){this.$store.dispatch("yibu");}}}</script>
