Cara menggunakan vuex untuk mengurus data dan status global dalam Vue

Vue.js ialah rangka kerja bahagian hadapan yang popular yang boleh membina antara muka pengguna yang sangat boleh diselenggara dan boleh digunakan semula. Salah satu kelebihan utamanya ialah ia sangat mudah dipelajari dan digunakan, serta berfungsi dengan lancar dengan perpustakaan dan rangka kerja lain. Walau bagaimanapun, apabila aplikasi anda mula menjadi lebih dan lebih kompleks, anda mungkin menghadapi masalah: bagaimana untuk mengurus keadaan dan data global? Inilah masalah yang Vuex selesaikan.

Vuex ialah perpustakaan pengurusan negeri yang direka khusus untuk Vue.js. Tujuan utamanya adalah untuk menjadikan penyelenggaraan negeri lebih terurus. Vuex mempersembahkan satu "sumber data" dan mengurusnya dengan cara yang boleh diramal.

Dalam artikel ini, kami akan memperkenalkan asas Vuex dan menunjukkan cara menggunakannya dalam Vue.js untuk mengurus keadaan dan data global.

Pengetahuan asas Vuex

Sebelum mendalami Vuex, kita perlu mempunyai pemahaman asas tentang konsep terasnya.

State

State ialah objek yang menyimpan keadaan aplikasi. Dalam Vuex, keadaan adalah reaktif, yang bermaksud bahawa apabila keadaan berubah, semua komponen yang menggunakan keadaan itu akan dikemas kini secara automatik. Biasanya anda harus memulakan keadaan kepada objek kosong.

const store = new Vuex.Store({
    state: {
        count: 0
    }
})

Getter

Getter ialah fungsi yang digunakan untuk mendapatkan data daripada keadaan. Getter boleh digunakan apabila kita perlu mengira atau menapis status. Getter menerima keadaan sebagai hujah pertamanya. Getters boleh menjadi sifat atau fungsi yang dikira.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        todoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})

Mutasi

Mutasi digunakan untuk menukar keadaan. Apabila menukar keadaan, anda mesti menggunakan Mutasi dan bukannya menukar keadaan secara langsung. Konvensyen ini membolehkan kami menjejaki setiap perubahan keadaan dan nyahpepijat atau menjejaki belakang apabila perubahan ini berlaku. Mutasi mestilah serentak.

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})

Tindakan

Tindakan digunakan untuk melaksanakan tugas tak segerak dan menyerahkan Mutasi. Tindakan selalunya mengandungi logik tak segerak, seperti panggilan API. Apabila Tindakan dipanggil, ia melakukan Mutasi dan bukannya menukar keadaan secara langsung.

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
})

Modul

Aplikasi Vuex biasanya mempunyai pokok keadaan yang besar. Untuk menjadikan pokok negeri boleh diselenggara, ia boleh dibahagikan kepada beberapa modul berasingan. Modul membolehkan kami mengatur kod kami dan mengasingkan keadaan dengan mudah.

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    modules: {
        counter: counterModule
    }
})

Urus keadaan global dengan Vuex

Sekarang kita memahami asas Vuex, mari lihat cara menggunakannya dalam aplikasi Vue.js.

Pasang Vuex

Untuk menggunakan Vuex, pasang dahulu ke dalam projek anda. Ia boleh dipasang menggunakan npm:

npm install vuex --save

Selepas pemasangan, anda perlu mengkonfigurasinya ke dalam Vue.js dengan memanggil kaedah Vue.use():

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Tentukan Keadaan

Mari kita cipta aplikasi Senarai Todo yang sangat mudah untuk menunjukkan cara menggunakan Vuex dengan Vue.js.

Mula-mula kita perlu mentakrifkan keadaan awal, dalam kes ini kita akan mentakrifkan tatasusunan todos:

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    }
})

Dapatkan Negeri

Sekarang kita tentukan keadaan kita, mari lihat bagaimana untuk mendapatkan status menggunakan Getter.

Getter membolehkan kami mendapatkan data dari negeri dan melakukan pengiraan. Dalam aplikasi Senarai Tugasan kami, kami boleh menggunakan Getters untuk mendapatkan status tertentu atau tugasan yang lengkap dan belum selesai.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    }
})

Tukar Keadaan

Jika anda ingin menukar keadaan, anda perlu menggunakan Mutasi. Bergantung pada aplikasi kami, kami boleh menentukan dua Mutasi: tambah Todo dan togol status penyelesaian.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    }
})

Lakukan Tindakan

Dalam aplikasi Todo List kami, kami mungkin perlu melakukan beberapa operasi tak segerak. Sebagai contoh, jika anda ingin mendapatkan todos daripada pelayan, anda perlu menggunakan Tindakan tak segerak.

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
})

Menggunakan Modul

Apabila keadaan Vuex anda menjadi lebih kompleks, anda mungkin perlu membahagikannya kepada beberapa modul.

Dalam aplikasi kami, kami boleh membahagikan keadaan aplikasi Senarai Todo kepada dua modul: Todo dan Pengguna. Modul Todo mengandungi data senarai Todo dan operasi berkaitan. Modul Pengguna mengandungi maklumat pengguna.

const todoModule = {
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
}

const userModule = {
    state: {
        user: null
    },
    mutations: {
        setUser: (state, user) => {
            state.user = user
        },
        clearUser: (state) => {
            state.user = null
        }
    },
    actions: {
        login: ({ commit }, user) => {
            api.login(user, () => {
                commit('setUser', user)
            })
        },
        logout: ({ commit }) => {
            api.logout(() => {
                commit('clearUser')
            })
        }
    }
}

const store = new Vuex.Store({
    modules: {
        todo: todoModule,
        user: userModule
    }
})

Ringkasan

Vuex ialah perpustakaan pengurusan negeri yang sangat berkuasa yang membantu kami mengurus keadaan dan data aplikasi Vue.js dengan elegan. Dengan menggunakan Vuex, kami boleh mengakses dan menukar keadaan global dengan mudah tanpa perlu menghantar data antara komponen secara manual. Ingat, amalan terbaik adalah menggunakan Vuex atas permintaan, apabila diperlukan. Untuk aplikasi mudah, hanya menggunakan keadaan komponen tempatan mungkin mencukupi untuk memenuhi keperluan anda sepenuhnya. Walau bagaimanapun, jika aplikasi anda menjadi semakin rumit, anda boleh mempertimbangkan untuk menggunakan Vuex untuk mengurus keadaan.

Atas ialah kandungan terperinci Cara menggunakan vuex untuk mengurus data dan status global dalam Vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!