Vuex使用分享

PeterYuan發表於2018-01-15
Vue

Vuex 使用分享

核心使用部分

  • state 狀態、資料
  • mutations 行為
  • actions 動作 (此處不做討論，因為沒有涉及到非同步操作)
  • getters 基於資料的一些返回值

CODE

定義（建立）

謹記一句話：不要為了使用狀態管理工具（Redux、Vuex、Mobx、Flux...）而用狀態管理工具！

這裡我的Team Leader給我舉了一個例子：Google郵箱的未讀數。

在很多地方都要用到，需要全域性維護一份，這樣有利於保持資料的統一性，不至於在某個地方讀了一封郵件之後將未讀數減一後，還要通知別處，全域性引用一個值，就不會存在這個問題，狀態管理工具就是實現這一點的

郵箱

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

//定義User類
class User {
    constructor(info){
        this.info = info;
    }
}

//定義資料
const state = {
    users:[]
}
//定義行為
const mutations = {
    addUser(state,info){
        state.users.push(new User(info));
    },
    updateUser(state,id,toUpdate){
        const {users} = state;
        const length = users.length;
        for(const i = 0;i<length;i++){
            let u = users[i];
            if(u.id === id){
                users[i] = {u,...toUpdate};
                break;
            }
        }
    },
    removeUser(state,id){
        const {users} = state;
        const index = users.findIndex(v=>v.id===id);
        users.splice(index,1);
    },
    findUser(state,id){
        return state.users.find(v=>v.id===id);
    }
}

//定義getters
const getters = {
    userCount:state=>state.users.length,
    //其實getUser也可以定義在此處，如下
    curUser:state=>id=>state.users.find(v=>v.id===id)
}

//定義資料倉儲 - store
const store = new Vuex.store({
    state,
    mutations,
    getters
});

export default store;
複製程式碼

好的基礎是成功的一半！

繫結 & 使用

<-----------------------------------以下為繫結------------------------------>

import Vue from 'vue';
import store from './store';
window.$vm = new Vue({
    el:"#app",
    store,//在入口檔案處，將store掛在Vue例項上，可以全域性使用
});
<-----------------------------------以下為使用------------------------------>

<template>
    <div>
        <input 
        type="text"
        placeholder="please input user's infomation..."
        v-model="info"/>
        <button @click="addUser">AddUser</button>
        <ul>
            <li v-for="u in $store.state.users">{{u.info}}</li>
        </ul>
        <div>
            <span>current user information:</span>
            <span>{{curUser.info}}</span>
        </div>
    </div>
</template>

<script>
    export default {
        name:"App",
        data(){
            return {
                info:"",
                curUser:{info:""}
            }
        },
        methods:{
            addUser(){
                $vm.$store.commit("addUser",this.info);
            },
            //remove、update、find 大同小異，就不一一列舉
            // 值得一體的是 find 既可以使用 mutations 獲得，也可以通過getters 得到
            findUser(id){
               this.curUser =  $vm.$store.commit("findUser",id);
               // or 
               this.curUser = $vm.$store.getters.curUser(id);
            }
        }
    }
</script>
複製程式碼

結語

作為入門級別，需要持續啃文件……

(程式碼就是直接在掘金編輯器內手敲的一些臨時組織的程式碼，僅為了展示、會議和記錄自己的使用方式和過程，並不一定能執行，想要測試的朋友，最好還是在自己的IDE內搭建專案實現功能最好。)

相關文章