VUEX踩坑日誌

我使用的是vue-cli+vuex，vue-cli的安裝和使用想必就不用我多說了，我這裡主要說一下vuex在vue-cli中的使用方法

首先在你的vue-cli下安裝vuex

npm install vuex --save--dev

在你的src目錄下新建一個Store資料夾，用來存放store.js等等

store
    |+store.js
    |+action.js
    |+mutation.js
    |+state.js
    |+getter.js

每個對應js對應其相應的功能，然後通過export default 暴露出去

State

State負責儲存整個應用的狀態資料，一般需要在使用的時候在跟節點注入store物件，後期就可以使用this.$store.state直接獲取狀態

modules

前面說過不論是多大的一個應用，都只有一個store，當應用郭大師store就會變得龐大，為了解決以上的問題，引入modules，可以分割store，每個模組擁有自己的statemutataion action getter等，甚至可以巢狀子模組

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ...
 
 }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態

功能1：元件直接從store中讀取某個狀態

state.js

const state = {
  msg: '原始資料'
 
,
}
export default state;

store.js

import Vue from "vue";
import Vuex from "vuex";
import state from "./state.js";

Vue.use(Vuex)    //這裡注意，一定要使用一下

const store=new Vue.Store({
  state
})
export default store;

然後需要在main.js中引用一下

import Vue from 'vue'
import App from './App'
import router from './router'
import store from "./store/store.js";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

在元件中

<template>
    <div class="abc">
        <input type="text" value="abc">
        <div>{{msg}}</div>
        <button>按鈕</button>
    </div>
</template>

<script>

//通過this.$store.state.msg

    export default {
        data(){
            return {
                msg:this.$store.state.msg,
            }
        },
    }
</script>

<style scoped></style>

功能2：做一個能記錄點選次數的功能

首先需要對mutation要有一個瞭解，mutation是修改store中State的唯一方法，在vuex中mutation是同步事務

mutations.js

const mutation={
    change(state){
        state.count++;
        alert(state.count)
    }
};
export default mutation;

store.js中引入

import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutation.js";

Vue.use(Vuex);
//定義資料
var state={
  count:0
};


var store=new Vuex.Store({
    state,
    mutations
});
export default store;

同樣需要在main.js中掛載

元件中

<template>
    <div class="abc">
        <input type="text"  :value="names">
        <div>{{names}}</div>
        <button @click="clicks">按鈕</button>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                names:this.$store.state.names,
            }
        },
        methods:{
            clicks(){
                this.$store.commit("change");
            }
        }
    }
</script>

mutation雖然能修改狀態，但是他是同步的有時候滿足不了我們的需求，此時就需要action來幫忙

action類似於mutation，但也有不同之處

• action提交的是mutation，不能直接變更狀態
• action是非同步的

用法如下

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment') //呼叫mutations裡的方法，而不是自己直接修改State
    }
  }
})

功能3：通過getter派生出一個新的State

有些狀態需要做二次處理需要使用getter方法

getter.js

const getters={
    arrLength:(state)=>{
        state.arr.length
    }
};
export default getters;

以上程式碼的意思是通過讀取state中arr屬性，派生出一個新的屬性arrLength

state

var state={
  count:0,
  arr:[1,2,3]
};

store.js和上面的一樣

元件

<template>
    <div class="abc">
        <input type="text"  :value="names">
        <div @click="len">{{names}}</div>
        <button @click="clicks">按鈕</button>
    </div>
</template>

<script>
    import { mapGetters } from "vuex";
    export default {
        data(){
            return {
                names:this.$store.state.names,
            }
        },
        methods:{
            clicks(){
                this.$store.commit("change");
            },

            len(){
                console.log(this.$store.state)   //這裡檢視有沒有通過gettter方法派生出來新的state
            }
        },
        computed:mapGetters([
            'arrLength'
        ])
    }
    </script>

<style scoped></style>