vuex及其輔助函數簡單使用

1、新建store文件夾，內部新建index.js

文件內部內容如下：

寫法一

import Vuex from "vuex";
import Vue from "vue";
Vue.use(Vuex);

// 第一種寫法：
const state={
    count:0,
    num:100
}
const  getters={
    changeState(){
        return state.count/4
    }
}
const actions={
    acCountAdd({commit},val){
        commit('muCountAdd',val)
    },
    acCountMinus({commit},val){
        commit('muCountMinus',val)
    },
}
const mutations={
    muCountAdd(state,val){
        state.count+=val
    },
    muCountMinus(state,val){
        state.count-=val
    }
}

export default new Vuex.Store({
    state,
    getters,
    actions,
    mutations
})

寫法二：

export default new Vuex.Store({
    state:{
        count:0,
        num:100
    },
    getters:{
        changeState(state){
            return state.count/4
        }
    },
    actions:{
        acCountAdd({commit},val){
            commit('muCountAdd',val)
        },
        acCountMinus({commit},val){
            commit('muCountMinus',val)
        },
    },
    mutations:{
        muCountAdd(state,val){
            state.count+=val
        },
        muCountMinus(state,val){
            state.count-=val
        }
    },
})

截圖：

 

 2、不使用輔助函數時組件內基本用法----list.vue頁面

<template>
  <div>
    <h2>list</h2>
    <!-- 不使用輔助函數時，使用屬性的方式 -->
    <h3>vuex中的count：{{$store.state.count}}</h3>
    <h3>vuex中的count：{{$store.getters.changeState}}</h3>
    <button @click="btnClick">減少vuex的值</button>
  </div>
</template>

<script>
export default {
  name: "List",
  data() {
    return {
    };
  },
  computed:{
   
  },
  methods:{
    btnClick(){
      // 調用方法的方式
      this.$store.dispatch('acCountMinus',5)
    }
  }
};
</script>

截圖：

 

 3、使用輔助函數時組件內寫法----home.vue頁面

<template>
  <div>
    <h2>home</h2>
    <h3>vuex中的state的count:{{count}}</h3>
    <h3>vuex中的getters的changeState:{{changeState}}</h3>
    <!-- 使用action輔助函數后，可以直接調用acCountAdd方法 -->
    <button @click='acCountAdd(10)'>home改變vuex</button>
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from "vuex"
export default {
  name: "Home",
  data() {
    return {
      
    };
  },
  created() {
    
  },
  computed:{
    // 使用state輔助函數,使用對象方式時，名稱可以不一致
    ...mapState({
      count:state=>state.count
    }),
    // 使用getters輔助函數,使用對象方式時，名稱可以不一致
    ...mapGetters({
      changeState:'changeState'
    })
  },
  methods: {
    // 使用mutations輔助函數,使用對象方式時，名稱可以不一致
    ...mapMutations({
      muCountAdd:'muCountAdd'
    }),
    // 使用actions輔助函數,使用對象方式時，名稱可以不一致
    ...mapActions({
      acCountAdd:'acCountAdd'
    })
  },
};
</script>

截圖：