vuex的使用步驟
一、使用Vuex的目的
實(shí)現(xiàn)多組件狀態(tài)管理。多個(gè)組件之間需要數(shù)據(jù)共享時(shí)，Vuex是個(gè)很好的幫手哦
二、Vuex 的五大核心
其中state和mutation是必須的，其他可根據(jù)需求來加
1.state
負(fù)責(zé)狀態(tài)管理，類似于vue中的data，用于初始化數(shù)據(jù)
2.mutation
專用于修改state中的數(shù)據(jù)，通過commit觸發(fā)
3.action
可以處理異步，通過dispatch觸發(fā)，不能直接修改state，首先在組件中通過dispatch觸發(fā)action，然后在action函數(shù)內(nèi)部commit觸發(fā)mutation，通過mutation修改state狀態(tài)值
4.getter
Vuex中的計(jì)算屬性，相當(dāng)于vue中的computed,依賴于state狀態(tài)值，狀態(tài)值一旦改變，getter會(huì)重新計(jì)算，也就是說，當(dāng)一個(gè)數(shù)據(jù)依賴于另一個(gè)數(shù)據(jù)發(fā)生變化時(shí)，就要使用getter
5.module
模塊化管理
三、Vuex 怎么用
1.首先當(dāng)然要安裝啦 (假設(shè)你已經(jīng)安裝了vue)
npm install vuex
2.引入并使用Vuex
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
3.實(shí)例化一個(gè)Vuex對(duì)象--Store狀態(tài)機(jī) 并拋出
const store = new Vuex.Store({})
export defaul store
4.在main.js中引入并注入Vuex
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
render: h => h(App),
store
}).$mount('#app')
5.通過this.$store訪問Vuex的數(shù)據(jù)
到此，Vuex已準(zhǔn)備完成，接下來就根據(jù)自己需要加入數(shù)據(jù)吧~
四、示例代碼
1.首先準(zhǔn)備至少兩個(gè)組件，不然怎么數(shù)據(jù)共享呢
<template>
<div>
我是組件1
</div>
</template>
<script> export default {
} </script>
<style scoped>
</style>
<template>
<div>
我是組件2
</div>
</template>
<script> export default {
} </script>
<style scoped>
</style>
2.在store.js中寫Vuex相關(guān)代碼
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {}, //狀態(tài)管理
mutations: {}, //修改state
actions: {}, //異步操作
getters:{}, //計(jì)算屬性
modules: {} //模塊
})
export default store
注：別忘了在main.js里注入store呀（參考上面第三大點(diǎn)的第4小點(diǎn)）
3.假設(shè)咱們現(xiàn)在需要共享一個(gè)數(shù)據(jù)data,初始值為0
···
const store = new Vuex.Store({
state: {
data:0
}
})
···
4.組件1和組件2都可以通過$store拿到data
<div>
我是組件1
{{this.$store.state.data}} //瀏覽器中此處會(huì)顯示data的值
</div>
<div>
我是組件2
{{this.$store.state.data}} //瀏覽器中此處會(huì)顯示data的值
</div>
5.那么怎么修改data呢，這時(shí)候就需要mutation出馬了
mutation實(shí)質(zhì)是一個(gè)函數(shù)，接收state和調(diào)用時(shí)傳來的params參數(shù)
mutations: {
changeDataMut(state,params){
state.data = params
}
}
6.mutation有了，接下來就需要在組件中調(diào)用它,記得要用commit觸發(fā)
<template>
<div>
我是組件1
<button @click='changeData'>改數(shù)據(jù)</button>
</div>
</template>
<script> export default {
data(){
return {
changeData(){
// 通過commit 觸發(fā) mutation 并傳參
this.$store.commit('changeDataMut',10) //此時(shí)組件1和組件2中data都是10啦
}
}
}
} </script>
7.action怎么用？
- action也是函數(shù)。
- 前面已經(jīng)說到，action不能直接修改state，首先要在組件中通過dispatch觸發(fā)action，然后在action函數(shù)內(nèi)部commit觸發(fā)mutation，通過mutation修改state狀態(tài)值。
- 注意action的參數(shù)
actions: {
changeDataAct(context,params){ //context是一個(gè)對(duì)象，從它里面把咱們需要的commit方法解構(gòu)出來
let {commit} = context
commit('changeDataMut',params)
}
}
這時(shí)候可以在組件中觸發(fā)action了，注意使用dispatch
<template>
<div>
我是組件2
<button @click='changeData'>改數(shù)據(jù)</button>
</div>
</template>
<script> export default {
data(){
return {
changeData(){
// 通過dispatch 觸發(fā) action 并傳參
this.$store.dispatch('changeDataAct',100)//此時(shí)data就變成100啦，并且組件1和組件2是同步的
}
}
}
} </script>
8.getter的用法
- getter 計(jì)算屬性 ,依賴于state值，需要return
- 現(xiàn)在咱們假設(shè)一個(gè)值double，它是data的兩倍，并且會(huì)隨著data發(fā)生改變
getters:{
doubleGet(state){
return state.data*2
}
}
- 我們可以在組件中使用它了
<div>
我是組件2
{{this.$store.getters.doubleGet}}
</div>
以上就是vuex的使用步驟的詳細(xì)內(nèi)容，更多關(guān)于vuex 使用的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題
這篇文章主要介紹了vue中使用element組件時(shí)事件想要傳遞其他參數(shù)的問題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
如果在面試中，面試官問你Vue組件之間有哪些數(shù)據(jù)通信方式，你會(huì)怎么回復(fù)，不要擔(dān)心，本文為大家整理了超全的Vue3中組件數(shù)據(jù)通信方式，需要的小伙伴快收藏起來吧2023-06-06
element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)
最近想要實(shí)現(xiàn)多選框關(guān)聯(lián)的功能，但是卻出現(xiàn)了element的el-tree多選樹(復(fù)選框)父子節(jié)點(diǎn)關(guān)聯(lián)不關(guān)聯(lián)的問題，本文就來介紹一下解決方法，一起來了解一下2021-05-05
Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3+TypeScript實(shí)現(xiàn)PDF預(yù)覽組件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
下面小編就為大家分享一篇解決使用vue.js路由后失效的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue項(xiàng)目打包清除console.log的四種方法總結(jié)
大家在項(xiàng)目開發(fā)的時(shí)候,需要看看一些后端接口返回的結(jié)果,會(huì)多次使用console.log項(xiàng)目開發(fā)完成打包的時(shí)候,發(fā)現(xiàn)控制臺(tái)一堆的console.log,非常頭疼,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包清除console.log的四種方法,需要的朋友可以參考下2023-04-04
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue用cmd創(chuàng)建項(xiàng)目的方法講解，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue渲染過程淺析，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果展示
這篇文章主要介紹了利用Vue實(shí)現(xiàn)數(shù)字翻滾動(dòng)畫效果,通過Vue的響應(yīng)式數(shù)據(jù)更新結(jié)合CSS3的動(dòng)畫效果,我們可以實(shí)現(xiàn)非?？犰诺臄?shù)字翻滾效果,給數(shù)據(jù)可視化帶來更多動(dòng)感和吸引力,需要的朋友參考下吧2024-04-04