Vuex的使用及知識點筆記
1 入門
vuex是為vue.js專門提供的狀態(tài)管理模式
簡單解釋：將所有組件公用的數(shù)據(jù)、方法提取到指定的地方，進行統(tǒng)一管理
2 安裝
下載vuex
npm i vuex --save
在src根目錄中新建一個store文件夾并新建一個index.js文件，并在index.js中引入vue和vuex
import Vue from 'vue'
//導入vuex插件
import Vuex from 'vuex'
//使用vuex插件
Vue.use(Vuex)
export default new Vuex.Store({
state:{//state相當于普通組件中的data數(shù)據(jù)域
},
getters:{//getter相當于computed對象
},
mutations:{//mutations相當于methods對象
},
actions:{
},
modules:{//分割模塊
}
})在main.js中導入index.js文件并掛載
3 核心概念的使用
3.1 state
state為vuex中的公共狀態(tài)，我們可以看成state為所有組件的data,用于保存所有組件的公共數(shù)據(jù)·。
export default new Vuex.Store({
state:{//state相當于普通組件中的data數(shù)據(jù)域
names:['胡桃','甘雨']
}
})在任意組件內(nèi)可以使用this.$store.state.names來獲取到state里面的數(shù)據(jù)
<p>{{this.$store.state.names}}</p>
3.2 getters
vuex的getters屬性可以理解為所有組件的computed屬性，也就是計算屬性.getters的返回值會根據(jù)其依賴緩存起來的，只有當依賴的值發(fā)生改變，getters才會重新計算
export default new Vuex.Store({
state:{//state相當于普通組件中的data數(shù)據(jù)域
names:['胡桃','甘雨'],
num:5
},
getters:{//getter相當于computed對象
add(state){//state的數(shù)據(jù)會自動傳入add的方法
return state.num+5
}
}
})
在任意的組件內(nèi)使用this.$store.getters.add調(diào)用計算的方法
<p>{{this.$store.state.names}}</p>
<p>{{this.$store.getters.add}}</p>3.3 mutations
vuex中的mutations可以理解為所有組件的methods方法。
mutations對象中保存了更改數(shù)據(jù)的回調(diào)函數(shù)。
第一個參數(shù)為state,第二個參數(shù)為payload,相當于自定義參數(shù)
export default new Vuex.Store({
state:{//state相當于普通組件中的data數(shù)據(jù)域
names:['胡桃','甘雨'],
num:5
},
getters:{//getter相當于computed對象
add(state){
return state.num+5
}
},
mutations:{//mutations相當于methods對象
add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
state.num+=payload;
}
}
})
在任意組件內(nèi)通過this.$store.commit()觸發(fā)mutations內(nèi)的方法
<template>
<div id='Home'>
<p>{{this.$store.state.names}}</p>
<p>{{this.$store.getters.add}}</p>
<p><input type="text" v-model="this.$store.state.num"/> <span @click="add()">+</span></p>
</div>
</template>
<script>
export default{
name:'Home',
methods:{
add(){
// this.$store.commit('evnetName',自定義的參數(shù))
this.$store.commit('add',5)
}
}
}
</script>每一次點擊都會給state里面的num數(shù)據(jù)加5
3.4 actions
actions和mutations類似，不同點在于：
1、actions提交的是mutations,而不是直接變更狀態(tài)
2、actions中包含異步，mutations中絕對不允許出現(xiàn)異步
3、actions中回調(diào)函數(shù)的第一個參數(shù)為context,得到一個與store具有相同屬性和方法的對象
export default new Vuex.Store({
state:{//state相當于普通組件中的data數(shù)據(jù)域
names:['胡桃','甘雨'],
num:5
},
getters:{//getter相當于computed對象
add(state){
return state.num+5
}
},
mutations:{//mutations相當于methods對象
add(state,payload){//注意：必須傳入state參數(shù)，payload為自定義參數(shù)
state.num+=payload;
}
},
actions:{
addSync(context,payload){
setTimeout(()=>{
//add為mutations內(nèi)定義的函數(shù)
//通過commit調(diào)用mutations內(nèi)的函數(shù)
context.commit('add',payload)
},1000)
}
},
})
組件內(nèi)綁定事件
<p><input type="text" v-model="this.$store.state.num"/> <span @click="addSync()">+</span></p>
通過 this.$store.dispatch調(diào)用actions內(nèi)的異步方法
methods:{
addSync(){
this.$store.dispatch('addSync',2)
}
}
測試的效果就是每次點擊之后，要過1s才會改變state里面的數(shù)值num
3.5 modules
由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。
當應用變得非常復雜時，store 對象就有可能變得相當臃腫。
為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。
每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
在組件內(nèi)分模塊進行訪問
<h2>{{this.$store.state.a.count}}</h2>
<h2>{{this.$store.state.b.msg}}</h2>
4 輔助函數(shù)的使用
mapState、mapGetters、mapMutations、mapActions
引入
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'在computed中使用擴展運算符進行定義
export default {
name: 'list',
data () {
return {
}
},
computed:{
...mapState({
//Index則代表state的num屬性
index:'num'
}),
...mapGetters({
// 屬性值add則代表getters內(nèi)的add方法
add:'add'
})
},
methods:{
...mapMutation({
addNum:'addNum'
}),
...mapActions({
})
}
}
vuex好文檔推薦 參考資料：https://vuex.vuejs.org/zh/
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇vue實現(xiàn)修改圖片后實時更新，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要介紹了vue中父子組件注意事項,傳值及slot應用技巧,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-05-05
在Vue.js中可以使用Element UI庫中的<el-upload>組件來實現(xiàn)多文件上傳的功能,這篇文章主要給大家介紹了關于el-upload前端實現(xiàn)多文件上傳功能的相關資料,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了在vue中實現(xiàn)禁止屏幕滾動,禁止屏幕滑動，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vuex modules模式下mapState/mapMutations的操作實例
這篇文章主要介紹了Vuex modules 模式下 mapState/mapMutations 的操作實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-10-10
Vue+Echarts實現(xiàn)繪制動態(tài)折線圖
這篇文章主要為大家詳細介紹了如何利用Vue和Echarts實現(xiàn)繪制動態(tài)折線圖，文中的示例代碼講解詳細，感興趣的小伙伴可以跟隨小編一起學習一下2023-03-03
這篇文章主要介紹了AntV F2和vue-cli構建移動端可視化視圖過程詳解,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-10-10
Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹
這篇文章主要介紹了Vue過濾器,生命周期函數(shù)和vue-resource簡單介紹，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2021-01-01
彈窗是我們開發(fā)中經(jīng)常遇到的一個功能,下面這篇文章主要給大家介紹了關于vue如何通過點擊事件彈出彈窗頁面的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-06-06
基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件
這篇文章主要介紹了基于elementUI使用v-model實現(xiàn)經(jīng)緯度輸入的vue組件,本文給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-05-05