vue全家桶-vuex深入講解
更新時(shí)間：2023年01月17日 14:39:54 作者：加蓓努力我先飛
這篇文章主要介紹了vue全家桶-vuex深入講解，文章內(nèi)容詳細(xì)，簡(jiǎn)單易懂，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
使用
index.js
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import system from './modules/system'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
settings,
user,
system
},
getters
})
export default storegetters.js
const getters = {
sidebar: state => state.app.sidebar,
device: state => state.app.device,
token: state => state.user.token,
avatar: state => state.user.avatar,
name: state => state.user.name,
currentuserinfo: state => state.system.currentuserinfo,
count: state => state.system.count,
}
export default getterssystem.js
const system = {
namespaced: true,
state: {
currentuserinfo: {},
count: 0,
},
mutations: {
SET_CURRENTUSERINFO: (state, currentuserinfo) => {
state.currentuserinfo = currentuserinfo
},
SET_COUNT: (state, count) => {
state.count = count
},
}
}
export default system全局使用：main.js文件中
import store from './store'
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})Vuex概述
Vuex是實(shí)現(xiàn)組件全局狀態(tài)（數(shù)據(jù)）管理的一種機(jī)制，可以方便的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享
使用Vuex管理數(shù)據(jù)的好處：
A.能夠在vuex中集中管理共享的數(shù)據(jù)，便于開(kāi)發(fā)和后期進(jìn)行維護(hù)
B.能夠高效的實(shí)現(xiàn)組件之間的數(shù)據(jù)共享，提高開(kāi)發(fā)效率
C.存儲(chǔ)在vuex中的數(shù)據(jù)是響應(yīng)式的，當(dāng)數(shù)據(jù)發(fā)生改變時(shí)，頁(yè)面中的數(shù)據(jù)也會(huì)同步更新
Vuex中的核心特性
vuex中的主要核心概念如下：
- State
- Mutation
- Action
- Getter
A.State
State提供唯一的公共數(shù)據(jù)源，所有共享的數(shù)據(jù)都要統(tǒng)一放到Store中的State中存儲(chǔ) 例如，打開(kāi)項(xiàng)目中的store.js文件，在State對(duì)象中可以添加我們要共享的數(shù)據(jù)，如：count:0
在組件中訪問(wèn)State的方式：
1).this.$store.state.全局?jǐn)?shù)據(jù)名稱 如：this.$store.state.count
2).先按需導(dǎo)入mapState函數(shù)： import { mapState } from 'vuex'
然后數(shù)據(jù)映射為計(jì)算屬性： computed:{ ...mapState(['全局?jǐn)?shù)據(jù)名稱']) }this.$store.state.全局?jǐn)?shù)據(jù)名稱-組件訪問(wèn)State中的數(shù)據(jù)的第一種方式
//訪問(wèn)
console.log("1111",this.$store.state.system.count);
<h3>當(dāng)前最新的count值為：{{$store.state.system.count}}</h3>組件訪問(wèn)State中的數(shù)據(jù)的第二種方式：按需導(dǎo)入
2).先按需導(dǎo)入mapState函數(shù)： import { mapState } from 'vuex'
//將全局?jǐn)?shù)據(jù)，用展開(kāi)運(yùn)算符映射為當(dāng)前組件的計(jì)算屬性
// 然后數(shù)據(jù)映射為計(jì)算屬性： computed:{ ...mapState(['count']) }
mapState()可以傳入對(duì)象或者數(shù)組
傳入數(shù)組用法: mapState(['counte', 'name','age'])
// 傳入對(duì)象用法：可以重命名store中的數(shù)據(jù)
...mapState({
sCounter: state => state.name,
......
})
computed:{
...mapState({
count: state => state.system.count,
......
}),
}B.Mutation
Mutation用于修改變更$store中的數(shù)據(jù)
只能通過(guò)Mutation變更Store數(shù)據(jù)，不可以直接操作Store中的數(shù)據(jù)通過(guò)這種方式雖然操作起來(lái)稍微繁瑣點(diǎn)，但是可以集中監(jiān)控所有的數(shù)據(jù)變化
this.$store.commit是觸發(fā)Mutation的第一種方式
1.定義：
const system = {
namespaced: true,
state: {
count: 0,
},
mutations: {
add(state) {
//變更狀態(tài)
state.count++
}
}
}
export default system2.使用
<template>
<div>
<h3>當(dāng)前最新的count值為：{{$store.state.system.count}}</h3>
<el-button type="primary" @click="btnHandler1">+1</el-button>
</div>
</template>
<script>
export default {
name: 'Addition',
props: {
},
data() {
return {
}
},
computed: {},
mounted() {},
methods: {
btnHandler1() {
this.$store.commit("system/add")
},
}
}
</script>
<style scoped>
</style>1.傳參—定義
mutations: {
add(state) {
state.count++
},
addN(state, step) {
state.count += step
}
}2.傳參-使用
methods: {
btnHandler1() {
this.$store.commit("system/add")
},
btnHandler2(val){
// commit 的作用就是調(diào)用某個(gè)mutation函數(shù)
this.$store.commit("system/addN",val)
},
}觸發(fā)Mutation的第二種方式，按需導(dǎo)入
從vuex中按需導(dǎo)入mapMutations 函數(shù)
import { mapMutations } from 'vuex'通過(guò)剛才導(dǎo)入的mapMutations 函數(shù)，將需要的mapMutations 函數(shù)，映射為當(dāng)前組件的methods方法：
sub(state) {
state.count--
},
subN(state, step) {
state.count -= step
},method:{
...mapMutations({
sub: 'system/sub'
}),
btnHandler1(){
this.sub()//直接引用
},
btnHandler2(val){
this.subN(val)
},
}C.Action
Action用于處理異步任務(wù)
如果通過(guò)異步操作變更數(shù)據(jù)，必須通過(guò)Action，而不能使用Mutation,但Action中還是要通過(guò)出發(fā)Mutation的方式間接變更數(shù)據(jù)
this.$store.dispatch()是觸發(fā)actions的第一種方式
actions: {
addAsync(content) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('add')
}, 1000)
}
}methods: {
// 異步的讓count自增+1
btnHandler3(){
// 這里的dispatch函數(shù)，專門用來(lái)觸發(fā)actions
this.$store.dispatch('system/addAsync')
},
}actions攜帶參數(shù)
觸發(fā)actions異步任務(wù)時(shí)攜帶參數(shù)
actions: {
addNAsync(content, step) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('addN', step)
}, 1000)
},
}methods: {
btnHandler4(){
// 這里的dispatch函數(shù)，專門用來(lái)觸發(fā)actions，傳參
this.$store.dispatch('system/addNAsync',3)
},
}觸發(fā)actions的第二種方式：按需導(dǎo)入
actions: {
subAsync(content) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('sub')
}, 1000)
},
subNAsync(content, step) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('subN', step)
}, 1000)
},
}import {mapActions } from 'vuex'
methods:{
...mapActions({
subAsync: 'system/subAsync',
subNAsync: 'system/subNAsync',
}),
btnHandler3(){
this.subAsync()
},
btnHandler4(){
this.subNAsync(3)
},
}D.Getter
Getter用于對(duì)Store中的數(shù)據(jù)進(jìn)行加工處理形成新的數(shù)據(jù)
它只會(huì)包裝Store中保存的數(shù)據(jù)，并不會(huì)修改Store中保存的數(shù)據(jù)，當(dāng)Store中的數(shù)據(jù)發(fā)生變化時(shí)，Getter生成的內(nèi)容也會(huì)隨之變化
打開(kāi)store.js文件，添加getters，如下：
使用getters的第一種方式
//system.js文件中的 getters中的showNum
<h3>{{$store.getters['system/showNum']}}</h3>
console.log('$store.state',this.$store.getters['system/showNum']);使用getters的第二種方式
<h3>{{showNum}}</h3> computed: {
...mapGetters({
showNum: 'system/showNum',
})
},代碼總結(jié)
system.js
const system = {
namespaced: true,
state: {
currentuserinfo: {},
count: 0,
},
// 只有mutations中定義的函數(shù)，才有全力修改state中的數(shù)據(jù)
mutations: {
// SET_CURRENTUSERINFO: (state, currentuserinfo) => {
// state.currentuserinfo = currentuserinfo
// },
// SET_COUNT: (state, count) => {
// state.count = count
// },
add(state) {
state.count++
},
addN(state, step) {
state.count += step
},
sub(state) {
state.count--
},
subN(state, step) {
state.count -= step
},
},
actions: {
addAsync(content) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('add')
}, 1000)
},
addNAsync(content, step) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('addN', step)
}, 1000)
},
subAsync(content) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('sub')
}, 1000)
},
subNAsync(content, step) {
setTimeout(() => {
// 在actions中，不能直接修改state中的數(shù)據(jù)
// 必須通過(guò)content.commit() 去觸發(fā)某個(gè)mutations才行
content.commit('subN', step)
}, 1000)
},
},
getters: {
//添加了一個(gè)showNum的屬性
showNum(state) {
return '最新的count值為：【' + state.count + '】';
}
}
}
export default systemsrc\views\learnVuex\index.vue
<template>
<div>
<my-addition ></my-addition>
<p>----------------------</p>
<my-subtranction ></my-subtranction>
</div>
</template>
<script>
// 導(dǎo)入
import Addition from '@/components/Addition';
import Subtranction from '@/components/Subtranction';
// import Subtranction from '../../components/Addition';
export default {
name: 'learnVuex',
props: {},
// 注冊(cè)
components: {
'my-addition': Addition,
'my-subtranction': Subtranction
},
data() {
return {
}
},
computed: {},
mounted(){
console.log("1111",this.$store.state.system.count);
},
}
</script>
<style scoped>
</style>src\components\Addition\index.vue
<template>
<div>
<h3>當(dāng)前最新的count值為：{{$store.state.system.count}}</h3>
<h3>{{$store.getters['system/showNum']}}</h3>
<el-button type="primary" @click="btnHandler1">+1</el-button>
<el-button type="primary" @click="btnHandler2(2)">+2</el-button>
<el-button type="primary" @click="btnHandler2(3)">+3</el-button>
<el-button type="primary" @click="btnHandler3">+1 Async</el-button>
<el-button type="primary" @click="btnHandler4">+3 Async</el-button>
</div>
</template>
<script>
export default {
name: 'Addition',
props: {
},
data() {
return {
}
},
computed: {},
mounted() {
console.log('$store.state',this.$store.getters['system/showNum']);
},
methods: {
btnHandler1() {
this.$store.commit("system/add")
},
btnHandler2(val){
// commit 的作用就是調(diào)用某個(gè)mutation函數(shù)
this.$store.commit("system/addN",val)
},
// 異步的讓count自增+1
btnHandler3(){
// 這里的dispatch函數(shù)，專門用來(lái)觸發(fā)actions
this.$store.dispatch('system/addAsync')
},
//
btnHandler4(){
// 這里的dispatch函數(shù)，專門用來(lái)觸發(fā)actions
this.$store.dispatch('system/addNAsync',3)
},
}
}
</script>
<style scoped>
</style>\src\components\Subtranction\index.vue
<template>
<div>
<h3>當(dāng)前最新的count值為：{{count}}</h3>
<h3>{{showNum}}</h3>
<el-button type="primary" @click="btnHandler1">-1</el-button>
<el-button type="primary" @click="btnHandler2(2)">-2</el-button>
<el-button type="primary" @click="btnHandler2(3)">-3</el-button>
<el-button type="primary" @click="btnHandler3">-1 Async</el-button>
<el-button type="primary" @click="btnHandler4">-3 Async</el-button>
</div>
</template>
<script>
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex'
export default {
name: 'Subtranction',
props: {},
data(){
return{
}
},
computed: {
...mapState({
count: state => state.system.count,
}),
...mapGetters({
showNum: 'system/showNum',
})
},
mounted(){
console.log("mapState",this.count);
},
methods:{
...mapMutations({
sub: 'system/sub',
subN: 'system/subN',
}),
...mapActions({
subAsync: 'system/subAsync',
subNAsync: 'system/subNAsync',
}),
btnHandler1(){
this.sub()
},
btnHandler2(val){
this.subN(val)
},
btnHandler3(){
this.subAsync()
},
btnHandler4(){
this.subNAsync(3)
},
}
}
</script>
<style scoped>
</style>以上就是vue全家桶-vuex深入講解的詳細(xì)內(nèi)容，更多關(guān)于vue全家桶-vuex的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作實(shí)例
這篇文章主要介紹了Vue使用axios post方式將表單中的數(shù)據(jù)以json格式提交給后端接收操作,結(jié)合實(shí)例形式分析了vue基于axios庫(kù)post傳送表單json格式數(shù)據(jù)相關(guān)操作實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2023-06-06
解決Vue調(diào)用springboot接口403跨域問(wèn)題
這篇文章主要介紹了解決Vue調(diào)用springboot接口403跨域問(wèn)題,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
這篇文章主要介紹了Vue實(shí)現(xiàn)微信支付功能遇到的坑,本文是小編記錄整理下拉的，以便日后所需，需要的朋友可以參考下2019-06-06
Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼
本篇文章主要介紹了Vue.js移動(dòng)端左滑刪除組件的實(shí)現(xiàn)代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
關(guān)于Element UI table 順序拖動(dòng)方式
這篇文章主要介紹了關(guān)于Element UI table 順序拖動(dòng)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了Vue混入mixins滾動(dòng)觸底的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue Router 路由實(shí)際上就是一種映射關(guān)系,例如,多個(gè)選項(xiàng)卡之間的切換就可以使用路由功能來(lái)實(shí)現(xiàn),在實(shí)際的開(kāi)發(fā)中,經(jīng)常需要通過(guò)URL來(lái)傳遞參數(shù),同時(shí)在 JavaScript 腳本中需要獲取URL中的參數(shù),下面將介紹 Vue 項(xiàng)目中,如何通過(guò) URL 對(duì)參數(shù)進(jìn)行傳遞與獲取,需要的朋友可以參考下2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue.js實(shí)現(xiàn)立體計(jì)算器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-02-02
vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題
這篇文章主要介紹了vue項(xiàng)目中頁(yè)面底部出現(xiàn)白邊及空白區(qū)域錯(cuò)誤的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
關(guān)于vue跳轉(zhuǎn)后頁(yè)面置頂?shù)膯?wèn)題
這篇文章主要介紹了關(guān)于vue跳轉(zhuǎn)后頁(yè)面置頂?shù)膯?wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05