Vue---Vuex 状態管理コア

目次

1. Vuex の機能

2. Vuex 状態管理コア

（1）状態

（2）ゲッター

 （3）突然変異

（4）アクション

---

1. Vuex の機能

vuex の出現は、コンポーネント間のデータ相互作用をより便利に管理することであり、状態管理モードです。Vuex のコアは、State、Getter、Mutation、Action の 4 つを最もよく使用します。

2. Vuex 状態管理コア

（1）状態

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 の機能は、データをフィルタリングすることです.具体的には、次のコード表示を見てみましょう.

//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 にはコールバック関数があります. このコールバック関数は状態変更が実際に実行される場所です. 最初のパラメータとして状態を受け取ります. 詳細については、コード表示を参照してください。        

//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 と Mutation は同じものとして理解できますが、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>