Vue---Vuex状态管理核心

目录

一、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.js


import { 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 /src


export default {
  name: 'HomeView',
  methods:{
    handle1(){
      this.$store.commit("setcou1",10);
    },
    handle2(){
      this.$store.commit("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 /src


export default {
  name: 'HomeView',
  methods:{
    handle1(){
      this.$store.commit("setcou1",10);
    },
    handle2(){
      this.$store.commit("setcou2",10);
    },
    yibucaozuo(){
      this.$store.dispatch("yibu");
    }
  }
}
</script>