資訊專欄INFORMATION COLUMN
先說一下Vuex到底是什么？
Vuex 是一個專門為 vue.js 應用程序開發的狀態管理模式喜歡看代碼學習的的可直接下載下方 Demo這個狀態我們可以理解為在 data 中的屬性，需要共享給其他組件使用的部分
也就是說，我們需要共享的數據，可以使用 vuex 進行統一集中式的管理
https://gitee.com/jiangliyue/...Vuex中的五種基本對象
state：存儲狀態（變量）
getters：對數據獲取之前的再次編譯，可以理解為 state 的計算屬性，我們在組件中使用 $store.getters.fun() 調用
mutations：修改狀態，并且是同步的。在組件中使用 $store.commit("操作名",params) 調用
actions：異步操作。在組件中使用 $store.dispatch("操作名") 調用
modules：store 的子模塊，為了開發大型項目，方便狀態管理而使用的，使用方法和上面一樣
// 常見vuex初始化配置
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
export default new Vuex.Store({
state: {
msg: "hello ",
username: ""
},
getters: {},
mutations: {},
actions: {},
modules: {}
})
在項目中使用 Vuex
將上面初始化的 Vuex 對象引入到 main.js 文件中
// 引入store
import store from "@/store/index"
new Vue({
store,
render: h => h(App)
}).$mount("#app")
在組件中使用
現在我們已經可以使用 Vuex 中的 state 了，接下來我們看看如何操作這個屬性{{$store.state.msg}}
Vuex 提供了 mutations 和 actions 兩種方法來操作 state
mutations（同步操作）
定義 mutations 對象里的方法，方法里面的參數，第一個默認為 state，第二個為自定義傳入參數。
/**
* mutations 里面放置的是我們操作state對象屬性的方法
*/
const mutations = {
setMsg(state, name) {
state.msg = "hellow" + name
}
}
export default new Vuex.Store({
state,
mutations
})
組件中使用 Vuex 提供的 commit 方法調用 mutations 中我們自定義的方法
created() {
this.setSayMsg("your Name")
},
methods: {
setSayMsg(name) {
this.$store.commit("setMsg",name)
}
}
效果如何大家自行實驗哈~
actions（異步操作）
定義 actions 對象里的方法，方法里面的參數，第一個是context，它是一個和 store 對象具有相同對象屬性的參數，第二個為自定義傳入參數。
通常當我們需要修改多個狀態或者說調用多個 mutations 里的方法時會用到 actions
/**
* actions 里面放置的是我們調用store對象的方法
*/
const actions = {
// 常規寫法
// actionsSetMsg(context, name) {
// context.commit("setMsg", name)
// }
// 簡化寫法
actionsSetMsg({ commit }, name) {
commit("setMsg", name)
}
}
export default new Vuex.Store({
state,
actions
})
組件中使用 Vuex 提供的 dispatch 方法調用 actions 中我們自定義的方法
created() {
this.actionsSetSayMsg("your Name")
},
methods: {
actionsSetSayMsg(name) {
this.$store.dispatch("actionsSetMsg",name)
}
}
最后是 getters，我們一般使用 getters 來獲取我們的 state，因為它算是 state 的一個計算屬性，相當于實時監聽狀態變化
定義 getters 對象里的方法
const getters = {
getMsg(state) {
return state.msg
}
}
export default new Vuex.Store({
state,
getters
})
組件中使用
computed: {
msg() {
return this.$store.getters.getMsg
}
}
看到這里如果上面的用法都能理解，那恭喜你的 Vuex 已經學的很好了！
接下來的是官方提供給我們使用 Vuex 的一些小技巧mapState
mapMutations
mapActions
mapGetters
需要明確的是，這些方法只是方便我們書寫，重點還是上面的基礎部分
這部分用到了 es6 的擴展運算符，不熟悉的同學自行百度吧，還是蠻有用的
用法還是看下面代碼直接點，主要記住2點引入都用到擴展運算符，即3個點 "..." ，方式則為下面 2種模板任選一種
...mapState({
你在該頁面想用的變量名: "你state對象里定義的屬性或方法名"
})
// 或者傳入一個數組,此時當前組件調用的變量名與state中定義的方法名一致
...mapState(["你state對象里定義的屬性或方法名"])
Demo Git 地址另外記住 ...mapState({...}) 和 ...mapGetters({...}) 放在 computed 計算屬性里， ...mapMutations({...}) 和 ...mapActions({...})放在methods 方法屬性里就可以了
https://gitee.com/jiangliyue/...
Msg: {{ $store.state.msg }}
Your Name: {{ username }}
mapState Your Name: {{ mapStateName }}
mapGetters Your Name: {{ mapGettersName }}
User Name:
最后，如果大家發現有什么問題，或者錯誤的地方，歡迎留言交流。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105341.html
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...
摘要：優點按需加載可以寫中路徑也可以動態加以后默認就是嚴格模式，默認嚴格模式完參考視頻資料經典入門到進階 上一篇：ES6入門到進階（一）：let、解構賦值、字符串模板、函數 一、循環 ES5里面新增一些東西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...
摘要：進階的知識的話就是響應式這一塊了，一套代碼能適配手機是初級前端工程師的進階，在北京工資一般在左右。進階的知識應該是這一塊了，當然并不難，了解怎么與后臺交互是學習的關鍵點，在北京的工資一般在左右。 web前端？如果你是一名web前端工程師，那么你將感到幸運，從之前的默默無聞，到后來的給后臺工程師打下手，再到巔峰一時。web前端可謂是當下最火的職位之一。 showImg(https://s...
閱讀 1407·2021-09-02 09:53
閱讀 2671·2021-07-29 13:50
閱讀 1720·2019-08-30 11:07
閱讀 1574·2019-08-30 11:00
閱讀 1455·2019-08-29 14:00
閱讀 1850·2019-08-29 12:52
閱讀 2566·2019-08-29 11:11
閱讀 3424·2019-08-26 12:23
