vuex的核心概念和基本使用詳解
介紹
Vuex是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享
開始
安裝
①直接下載方式
創(chuàng)建一個(gè) vuex.js 文件 將https://unpkg.com/vuex這個(gè)網(wǎng)址里的內(nèi)容放到該文件夾里。
②CND方式
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
③NPM方式
npm install vuex --save
④Yarn方式
yarn add vuex
NPM方式安裝的使用方式
1.在 scr 文件里創(chuàng)建一個(gè) store / index.js 的文件夾，寫入以下內(nèi)容。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
modules: {}
})
2.在main.js 里引入，然后掛載到 Vue 實(shí)例里
import Vue from 'vue'
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
store概念及使用
概念：
就是組件之間共享數(shù)據(jù)的。
只有 mutations 才能修改 store 中的數(shù)據(jù)
使用：
先定義后使用
定義
state: {
num: 0
}
使用
方式1(推薦)
<div>{{ numAlias }}</div>
import { mapState } from 'vuex'
export default {
//計(jì)算函數(shù)
computed: mapState({
// 傳字符串參數(shù) 'count' 等同于 `state => state.count`
numAlias: 'num',//常用key是自己起的名隨便 value接收的數(shù)據(jù)
// 箭頭函數(shù)可使代碼更簡(jiǎn)練
count: state => state.count,
// 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
countPlusLocalState (state) {
return state.count + this.localCount
}
//可以定義其余的計(jì)算函數(shù)
}),
//或者這樣
//計(jì)算函數(shù)
computed: {
mapState(['count'])
}
}
方式2
<div>{{ $store.state.count }}</div>
mutations概念及使用
概念：
修改store里的數(shù)據(jù)，嚴(yán)格規(guī)定不能在其余的地方修改store的數(shù)據(jù)，mutations里不要執(zhí)行異步操作。
mutation 必須同步執(zhí)行,不能異步執(zhí)行。
使用：
先定義方法后使用
定義
mutations: {
//increment自定義方法 store參數(shù)是store數(shù)據(jù), parameter參數(shù)是接收到的數(shù)據(jù),可不要
increment (state, parameter) {
// 變更狀態(tài)
state.num++
}
}
使用
方式1(推薦使用)
import { mapState, mapMutations } from 'vuex'
//方法
methods: {
...mapMutations([
// mutations自定義的方法名
'increment'
]),
love() {
// 直接this調(diào)用 this.increment('需要傳過(guò)去的數(shù)據(jù),可不要')
this.increment('Bin')
}
}
方式2
methods: {
love() {
// this.$store.commit('自定義的名稱', '傳過(guò)去的數(shù)據(jù),可不傳')
this.$store.commit('increment', 'data')
}
}
action概念及使用
概念：
用于處理異步操作。
如果通過(guò)異步操作變更數(shù)據(jù)，必須通過(guò)action，而不能使用mutation，但是在action中還是要通過(guò)觸發(fā)mutation的方式間接變更數(shù)據(jù)。
Action 類似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接變更數(shù)據(jù)(狀態(tài))。
- Action 可以包含任意異步操作。
定義
mutations: {
//increment自定義方法 store參數(shù)是store數(shù)據(jù), parameter參數(shù)是接收到的數(shù)據(jù),可不要
increment (state, parameter) {
// 變更狀態(tài)
state.num++
}
},
actions: {
//add 自定義方法 context是參數(shù)，可以把它當(dāng)作vuex的實(shí)例
add(context) {
//可以通過(guò)context.commit('mutations中需要調(diào)用的方法')
context.commit('increment')
}
}
使用
方式1(推薦)
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'add', // 將 `this.add()` 映射為 `this.$store.dispatch('add')`
// `mapActions` 也支持載荷：
'add' // 將 `this.add(amount)` 映射為 `this.$store.dispatch('add', amount)`
]),
...mapActions({
add: 'add' // 將 `this.add()` 映射為 `this.$store.dispatch('increment')`
}),
love() {
// 直接this調(diào)用 this.add('需要傳過(guò)去的數(shù)據(jù),可不要')
this.add(data)
}
}
}
方式2
methods: {
love() {
// this.$store.dispatch('自定義的名稱', '傳過(guò)去的數(shù)據(jù),可不傳')
this.$store.dispatch('add', data)
}
}
getters概念及使用
概念：
getter用于對(duì)store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)。getting可以對(duì)store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似Vue的計(jì)算縮寫。
定義
state: {
num: 0
},
getters: {
doneTodos: state => {
return state.num = 10
}
}
使用
方式1(推薦)
<div>{{ doneTodos }}</div>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
//計(jì)算函數(shù)
computed: {
...mapState(['count']),
...mapmapGetters(['doneTodos'])
}
}
方式2
<div>{{ $store.getters.doneTodos }}</div>
總結(jié)
本篇文章就到這里了，希望能夠給你帶來(lái)幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
本篇文章主要主要介紹了Vue的MVVM實(shí)現(xiàn)方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的方法詳解
這篇文章主要給大家介紹了關(guān)于Vue3純前端實(shí)現(xiàn)Vue路由權(quán)限的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue3具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-05-05
這篇文章主要為大家介紹了Vue的data為啥只能是函數(shù)原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
vue獲取v-for異步數(shù)據(jù)dom的解決問(wèn)題
這篇文章主要介紹了vue獲取v-for異步數(shù)據(jù)dom的解決問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
最近一段時(shí)間，一直在做主題方面的工作。我們的主題，并不是簡(jiǎn)單切換一下顏色，或者排版變化這些，而是變化比較大的主題。比如說(shuō)：主題1和主題2看起來(lái)完全不一樣，功能甚至都不一樣。這樣，通過(guò)切換css就無(wú)法做到了，因此我思考良久，使用了如下2種方法2021-06-06
Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn)
tsconfig.json文件中指定了用來(lái)編譯這個(gè)項(xiàng)目的根文件和編譯選項(xiàng),本文就來(lái)介紹一下Vue開發(fā)配置tsconfig.json文件的實(shí)現(xiàn),感興趣的可以了解一下2023-08-08
這篇文章主要介紹了Vue——前端生成二維碼的示例，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作
這篇文章主要介紹了Vue點(diǎn)擊切換Class變化,實(shí)現(xiàn)Active當(dāng)前樣式操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-07-07
后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問(wèn)題
這篇文章主要介紹了后臺(tái)使用freeMarker和前端使用vue的方法及遇到的問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-06-06
vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決
頁(yè)面有定時(shí)器,并且定時(shí)器在離開頁(yè)面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無(wú)法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02