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.
Sebelum mendalami Vuex, kita perlu mempunyai pemahaman asas tentang konsep terasnya.
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 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 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 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)
}
}
})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
}
})Sekarang kita memahami asas Vuex, mari lihat cara menggunakannya dalam aplikasi Vue.js.
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)
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 }
]
}
})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)
}
}
})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
}
}
})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)
})
})
}
}
})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
}
})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!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
