淺談Vuex的狀態(tài)管理(全家桶)
Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。Vuex 也集成到 Vue 的官方調(diào)試工具 devtools extension，提供了諸如零配置的 time-travel 調(diào)試、狀態(tài)快照導(dǎo)入導(dǎo)出等高級(jí)調(diào)試功能。
讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡(jiǎn)單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：主機(jī)域名、網(wǎng)站空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、歷城網(wǎng)站維護(hù)、網(wǎng)站推廣。
以上是vuex的官方文檔對(duì)vuex的介紹，官方文檔對(duì)vuex的用法進(jìn)行了詳細(xì)的說明。這里就不再細(xì)講vuex的各個(gè)用法，寫這篇博客的目的只是幫助部分同學(xué)更快地理解并上手vuex。
1. 安裝
$ npm install vuex --save
2. 在main.js 主入口js里面引用store.js
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './vuex/store' //引用store.js
Vue.config.productionTip = false //阻止在啟動(dòng)時(shí)生成生產(chǎn)提示
//vue實(shí)例
new Vue({
el: '#app',
router,
store, //把store掛在到vue的實(shí)例下面
template: '3. 在store.js里引用Vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex) //注冊(cè)Vuex
// 定義常量 如果訪問他的話，就叫訪問狀態(tài)對(duì)象
const state = {
count: 1
}
// mutations用來改變store狀態(tài), 如果訪問他的話，就叫訪問觸發(fā)狀態(tài)
const mutations = {
//這里面的方法是用 this.$store.commit('jia') 來觸發(fā)
jia(state){
state.count ++
},
jian(state){
state.count --
},
}
//暴露到外面，讓其他地方的引用
export default new Vuex.Store({
state,
mutations
})
4. 在vue組件中使用
使用$store.commit('jia')區(qū)觸發(fā)mutations下面的加減方法
Hello Vuex
{{$store.state.count}}
5. 查看演示
6. state訪問狀態(tài)對(duì)象
使用computed計(jì)算
Hello Vuex
{{count}}
7. mutations觸發(fā)狀態(tài) （同步狀態(tài)）
Hello Vuex
{{count}}
8. getters計(jì)算屬性
getter不能使用箭頭函數(shù)，會(huì)改變this的指向
在store.js添加getters
// 計(jì)算
const getters = {
count(state){
return state.count + 66
}
}
export default new Vuex.Store({
state,
mutations,
getters
})
//count的參數(shù)就是上面定義的state對(duì)象
//getters中定義的方法名稱和組件中使用的時(shí)候一定是一致的,定義的是count方法，使用的時(shí)候也用count，保持一致。
組件中使用
9. actions (異步狀態(tài))
在store.js添加actions
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 定義常量
const state = {
count: 1
}
// mutations用來改變store狀態(tài) 同步狀態(tài)
const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
}
// 計(jì)算屬性
const getters = {
count(state){
return state.count + 66
}
}
// 異步狀態(tài)
const actions = {
jiaplus(context){
context.commit('jia') //調(diào)用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000)
alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法')
},
jianplus(context){
context.commit('jian')
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
})
在組件中使用
Hello Vuex
{{count}}
10. modules 模塊
適用于非常大的項(xiàng)目，且狀態(tài)很多的情況下使用，便于管理
修改store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 1
}
const mutations = {
jia(state){
state.count ++
},
jian(state){
state.count --
},
}
const getters = {
count(state){
return state.count + 66
}
}
const actions = {
jiaplus(context){
context.commit('jia') //調(diào)用mutations下面的方法
setTimeout(()=>{
context.commit('jian')
},2000)
alert('我先被執(zhí)行了，然后兩秒后調(diào)用jian的方法')
},
jianplus(context){
context.commit('jian')
}
}
//module使用模塊組的方式 moduleA
const moduleA = {
state,
mutations,
getters,
actions
}
// 模塊B moduleB
const moduleB = {
state: {
count:108
}
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB,
}
})
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
網(wǎng)站欄目：淺談Vuex的狀態(tài)管理(全家桶)
分享URL：http://www.jiaotiyi.com/article/gcepgp.html