Vue Vuex搭建vuex環境及vuex求和案例分享

2022-04-15 13:00:23

Vuex介紹

概念

在 Vue 中實現集中式狀態(資料)管理的一個 Vue 外掛，對 vue 應用中多個元件的共用狀態進行集中式的管理(讀寫)，也是一種元件間通訊的方式，且適用於任意元件間通訊

何時使用

多個元件需要共用資料時

求和案例–純vue版

新建 Count.vue 元件，並在 App.vue 中註冊參照

<template>
  <div>
    <Count/>
  </div>
</template>

<script>
import Count from "@/components/Count";

export default {
  name: 'App',
  components: {Count},
}
</script>

<style>

</style>

我們主要關注 Count.vue

<template>
  <div class="category">
    <h1>當前求和為：{{ sum }}</h1>
    <select v-model="n">
      <!--這裡的value前有冒號，否則value值是字串-->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>

    <!--v-model.number收集到的資料強轉為number-->
<!--    <select v-model.number="n">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>-->
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">當前和為奇數再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,//使用者選擇的數位
      sum: 0,//當前和
    }
  },
  methods: {
    increment() {
      this.sum += this.n
    },
    decrement() {
      this.sum -= this.n
    },
    incrementOdd() {
      if (this.sum % 2) {
        this.sum += this.n
      }
    },
    incrementWait() {
      setTimeout(() => {
        this.sum += this.n
      }, 500)
    }
  }
}
</script>

<style scoped>
select, button {
  margin-right: 5px;
}
</style>

搭建vuex環境

注意：

vue2 中要使用 vuex 的 3 版本
vue3 中要使用 vuex 的 4 版本

因為我們使用的是 vue2 所以我們需要安裝 vuex 的 3 版本

1、執行 npm i vuex@3 來安裝 vuex 3 版本
2、src 下建立 store 資料夾，在其中建立一個 index.js

index.js

//該檔案用於建立vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應用vuex外掛
Vue.use(Vuex)

//準備actions；用於相應元件中的動作
const actions = {}
//準備mutations；用於運算元據（state）
const mutations = {}
//準備state；用於儲存資料
const state = {}

//建立並暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，簡寫
    state,//key和value重名了，簡寫
});

3、main.js 中引入剛才寫好的 store

......
//引入store
//import store from './store/index'
import store from './store'

......

//建立vm
new Vue({
    el: "#app",
    //store:store
    store,//觸發簡寫形式
    ......
})

執行專案，我們可以列印 vm 和 vc，可以看到 $store

求和案例–vuex版

我們將求和的案例改為 vuex 版本

1、首先把資料交給 state

所以我們把 Count 元件中的資料 sum 變數剪下走放到 index.js 中的 state 中，同時 Count 元件中的方法，例如加法 increment 中使用 this.$store.dispatch("方法名",變數) 來替代原來的方法。這樣就走完了流程圖中以下部分

Count.vue

<template>
  <div class="category">
    <h1>當前求和為：{{$store.state.sum}}</h1>
    ......
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,//使用者選擇的數位
    }
  },
  methods: {
    increment() {
      this.$store.dispatch("jia",this.n);
    }
    ......
  }
}
</script>

同時 index.js 中的 action 中新增對應的方法名，從圖上的流程圖來看，actions 中的東西會交到 mutations 中處理，所以需要手動呼叫 commit方法

mutation 中也需要增加同樣的方法名，這裡可以都改成大寫，做個區分。方法中第一個引數就是 state，方法中處理真實邏輯即可

index.js

//該檔案用於建立vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應用vuex外掛
Vue.use(Vuex)

//準備actions；用於相應元件中的動作
const actions = {
    /*jia:function () {
    }*/
    //簡寫為：
    jia(context,value){
        console.log("actions中的jia被呼叫了",context,value);
        context.commit("JIA",value)
    }
}
//準備mutations；用於運算元據（state）
const mutations = {
    JIA(state,value){
        console.log("mutations中的JIA被呼叫了",state,value);
        state.sum += value;
    }
}

//準備state；用於儲存資料
const state = {
    sum: 0,//當前和
}

//建立並暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，簡寫
    state,//key和value重名了，簡寫
});

log 輸出：

執行程式：

我們根據以上思路完善其他方法

Count.vue

<template>
  <div class="category">
    <h1>當前求和為：{{$store.state.sum}}</h1>
    <select v-model="n">
      <!--這裡的value前有冒號，否則value值是字串-->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="incrementOdd">當前和為奇數再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name: "Count",
  data() {
    return {
      n: 1,//使用者選擇的數位
    }
  },
  methods: {
    increment() {
      this.$store.dispatch("jia",this.n);
    },
    decrement() {
      this.$store.commit("JIAN",this.n);
    },
    incrementOdd() {
      this.$store.dispatch("jiaOdd",this.n);
    },
    incrementWait() {
      this.$store.dispatch("jiaWait",this.n);
    }
  }
}
</script>

<style scoped>
select, button {
  margin-right: 5px;
}
</style>

index.js

//該檔案用於建立vuex中最為核心的store

//引入vuex
import Vuex from 'vuex'
//引入vue
import Vue from "vue";
//應用vuex外掛
Vue.use(Vuex)

//準備actions；用於相應元件中的動作
const actions = {
    /*jia:function () {
    }*/
    //簡寫為：
    jia(context,value){
        console.log("actions中的jia被呼叫了");
        context.commit("JIA",value)
    },
    jiaOdd(context,value){
        console.log("actions中的jianOdd被呼叫了");
        if(context.state.sum % 2){
            context.commit("JIA",value)
        }
    },
    jiaWait(context,value){
        console.log("actions中的jianWait被呼叫了");
        setTimeout(() => {
            context.commit("JIA",value)
        }, 500)
    }
}
//準備mutations；用於運算元據（state）
const mutations = {
    JIA(state,value){
        console.log("mutations中的JIA被呼叫了",state,value);
        state.sum += value;
    },
    JIAN(state,value){
        console.log("mutations中的JIAN被呼叫了",state,value);
        state.sum -= value;
    }
}

//準備state；用於儲存資料
const state = {
    sum: 0,//當前和
}

//建立並暴露store
export default new Vuex.Store({
    actions:actions,
    mutations,//key和value重名了，簡寫
    state,//key和value重名了，簡寫
});

到此為止，功能就實現了，你發現了嗎，這裡做了些優化，由於 index.js 中的 jia、jian方法裡邊什麼都沒做，直接就 commit 給了 mutation，而 vc 是可以直接對話 Mutations 的，如下圖：

所以我們把 index.js 中 actions 中的 jian方法去掉，在 Count 中直接呼叫 mutation 中的方法，也就是我們把 jian方法去掉，在 Count 的 decrement 方法中直接呼叫 commit 了

decrement() {
    this.$store.commit("JIAN",this.n);
},

若沒有網路請求或其他業務邏輯，元件中也可以越過 actions，即不寫 dispatch，直接編寫 commit

一些疑惑和問題

index.js 中的上下文有什麼作用？我們可以列印下 context：

可以看到其中有dispatch、commit、state這些熟悉的身影。我們用 jiaOdd 舉例，當方法邏輯處理複雜時，可以繼續 dispatch 其他方法來分擔。而有了 state 我們可以拿到其中的 sum 值：

    jiaOdd(context,value){
        console.log("actions中的jianOdd被呼叫了",context);
        if(context.state.sum % 2){
            context.commit("JIA",value)
        }
        context.dispatch("demo",value)
    },
    demo() {
        //處理一些事情
    },

到此這篇關於Vue Vuex搭建vuex環境及vuex求和案例分享的文章就介紹到這了,更多相關Vue Vuex 搭建內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

Vue Vuex搭建vuex環境及vuex求和案例分享

目錄

Vuex介紹

概念

何時使用

多個元件需要共用資料時

求和案例–純vue版

搭建vuex環境

求和案例–vuex版

一些疑惑和問題

熱門文章