vuex中的state、getters、mutations、actions之間的關(guān)系解讀
更新時間：2023年10月27日 08:54:14 作者：代碼無邊，回頭是岸
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關(guān)系,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
一、state的用法
<body>
<!--
想要獲取到state中的數(shù)據(jù)
{{$store.state.屬性}}
以為這個表達(dá)式很長，所以我們可以直接通過computed去獲取
{
computed: {
屬性名 () {
return this.$store.state.屬性
}
}
}
{{屬性名}}
-->
<div id="app">
{{$store.state.msg}}
<br>
{{msg}}
<br>
{{m}}
</div>
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<script>
const store = new Vuex.Store({
// state是一個對象，包含了各個組件中的狀態(tài)（數(shù)據(jù)），state是一個全局?jǐn)?shù)據(jù)，在任何地方都可以獲取
state: {
msg: 'Hello Vuex'
}
})
const app = new Vue({
el: "#app",
store,
data: {
m: '自己的數(shù)據(jù)'
},
computed: {
msg () {
return this.$store.state.msg
}
}
})
</script>
</body>二、getters的用法
<body>
<div id="app">
<!-- {{$store.getters.boys}} -->
{{boys}}
<!-- {{$store.getters.boysLength}} -->
<br>
{{$store.getters.ageStu(53)}}
</div>
<!--
{
state: {
},
getters: {
getter名 (state, getters) {
// 因?yàn)槲覀僩etter的數(shù)據(jù)就是從state中得到
// 我們還可以從其他的getters中得到對應(yīng)的數(shù)據(jù)
},
getter名 (state) {
// 返回一個函數(shù)
return (參數(shù)) => {
// 函數(shù)中返回數(shù)據(jù) 我們就可以在函數(shù)中去添加形參
return 數(shù)據(jù)
}
}
}
}
在使用時，直接返回數(shù)據(jù)的getter那么我們可以
{{$store.getters.getter}}
返回函數(shù)的，我們可以
{{$store.getters.getter(參數(shù))}}
不管是getter還是state，使用時，我們都可以直接
$store.getters/state.屬性名
因?yàn)樘L，所以可以寫在computed
computed: {
屬性名 () {
return this.$store.getters/state.屬性名
}
}
-->
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<script>
const store = new Vuex.Store({
state: {
stus: [
{
name: '張三21',
age: 18,
sex: '女'
}, {
name: '張三42',
age: 14,
sex: '女'
}, {
name: '張三42',
age: 54,
sex: '女'
}, {
name: '張三2',
age: 34,
sex: '女'
}, {
name: '張三4',
age: 13,
sex: '男'
}, {
name: '張三52',
age: 53,
sex: '男'
}
]
},
getters: {
boys (state) {
return state.stus.filter(stu => stu.sex === '男')
},
boysLength (state, getters) {
return getters.boys.length
},
ageStu (state) {
// return state.stus.filter(stu => stu.age > 20)
return (age) => {
return state.stus.filter(stu => stu.age > age)
}
},
/* ageStu: state => age => state.stus.filter(stu => stu.age > age) */
}
})
const app = new Vue({
el: '#app',
store,
computed: {
boys () {
return this.$store.getters.boys
}
}
})
</script>
</body>三、mutation的用法
<body>
<!--
更改vuex中state的唯一方法就是提交mutation，mutation的代碼都是同步的
mutation類似于自定義事件
想要改變state中的值，那么我們只需要在mutations中添加對應(yīng)的mutation函數(shù)
這個函數(shù)只需要管改變操作即可
然后在組件中的事件函數(shù)里提交對應(yīng)mutation即可
{
mutations: {
mutation函數(shù) (state, payload) {
// 因?yàn)閙utation改變的是state中的值，所以我們參數(shù)中有一個state方便我們快速改變對應(yīng)的值
// payload接收commit處傳遞過來的數(shù)據(jù)
}
}
}
組件函數(shù)中提交mutation
{
methods: {
函數(shù) () {
this.$store.commit('mutation名字', 數(shù)據(jù))
}
}
}
有些時候?qū)ο笫遣恢С猪憫?yīng)式的，所以改變對象我們應(yīng)該使用
this.$set(對象, '屬性', '屬性值')
this.$delete(對象, '屬性')
Vue.set()
Vue.delete()
-->
<div id="app">
<button @click="changeMsg">按鈕</button>
<br>
{{msg}}
<br>
<ul>
<li v-for="value in obj">{{value}}</li>
</ul>
</div>
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<script>
const store = new Vuex.Store({
state: {
msg: '消息'
},
mutations: {
changeMsg (state, payload) {
// 在這里改變state即可
state.msg = payload.msg
},
[mutation_types.MUTATION1] () {
}
}
})
const app = new Vue({
el: '#app',
store,
data: {
obj: {
a: 1
}
},
computed: {
msg () {
return this.$store.state.msg
}
},
methods: {
changeMsg () {
this.$store.commit('changeMsg', {msg: '組件中的值', a: 2})
}
}
})
</script>
</body>四、action的用法
<body>
<div id="app">
{{users}}
</div>
<!--
action用法和mutation類似
action中涉及的是異步操作
action需要使用store.dispatch進(jìn)行分發(fā)
this.$store.dispatch('action名字', 數(shù)據(jù))
actions: {
action名字 (context, payload) {
進(jìn)行異步請求
context是一個和store一模一樣的對象，payload就是dispatch時傳遞過來的數(shù)據(jù)
context.commit('mutation')
},
action名字 ({commit}, payload) {
commit('mutation')
},
action名字 ({commit, state}, payload) {
// 在這里得到state的目的是，獲取到state中的數(shù)據(jù)，但是不能修改
}
}
-->
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
<script src="./axios.min.js"></script>
<script>
const store = new Vuex.Store({
state: {
users: []
},
mutations: {
setUsers (state, users) {
state.users = users
}
},
actions: {
getUsers (context, page) {
axios.get('http://localhost:3000/user/listpage?page=' + page).then(res => {
// console.log(res.data)
// 在action的請求結(jié)果中提交mutation
// 因?yàn)閏ontext和$store是一致的，所以我們可以直接調(diào)用context的commit方法去提交mutation
context.commit('setUsers', res.data)
})
}
}
})
const app = new Vue({
el: '#app',
store,
computed: {
users () {
return this.$store.state.users
}
},
created () {
// 在這里進(jìn)行分發(fā)action
this.$store.dispatch('getUsers', 2)
}
})
</script>
</body>五、總結(jié)
<script>
/*
state
保存了組件的數(shù)據(jù)
如果想要在組件中使用msg這個數(shù)據(jù)，最簡單的
直接
模板中{{$store.state.msg}}
函數(shù)中this.$store.state.msg
想要好看，則
computed: {
msg () {
return this.$store.state.msg // 其他地方就可以直接使用msg
}
}
getter 在組件中使用時和state方法類似，要把state改成getters
想要使用reverseMsg
直接
模板中{{$store.getters.reverseMsg}}
函數(shù)中this.$store.getters.reverseMsg
想要好看，則
computed: {
reverseMsg () {
return this.$store.getters.reverseMsg
}
}
mutation
mutation是一個函數(shù)，它的作用就是修改state，而且修改state只能通過這一個方式
我們?nèi)绻胍诮M件中對某個數(shù)據(jù)進(jìn)行修改，則，直接提交對應(yīng)的mutation即可
this.$store.commit('setMsg', '相關(guān)數(shù)據(jù)')
因?yàn)閙utation要改變state，所以在mutation中有參數(shù)state和載荷payload
action
用法類似于mutation
一、給mutation傳值需要commit
這是接受的操作
{
mutations: {
mutation函數(shù) (state, payload) {
// 因?yàn)閙utation改變的是state中的值，所以我們參數(shù)中有一個state方便我們快速改變對應(yīng)的值
// payload接收commit處傳遞過來的數(shù)據(jù)
}
}
}
組件函數(shù)中提交mutation，就是給mutation傳值
{
methods: {
函數(shù) () {
this.$store.commit('mutation函數(shù)', 數(shù)據(jù))
}
}
}
二、給action傳值需要dispatch
this.$store.dispatch('action名字', 數(shù)據(jù))
因?yàn)閙utation是同步修改state，所以參數(shù)中有state
但是action是異步獲取數(shù)據(jù)，獲取后的數(shù)據(jù)想要修改到state，因此action中一定要提交mutation去修改state，所以在action的函數(shù)中有參數(shù)context，這個context就是一個store
如果想要提交，則context.commit('mutation中的函數(shù)名'，傳的值)
*/
const store = new Vuex.Store({
state: {
msg: '數(shù)據(jù)'
},
getters: {
reveseMsg () {
return msg.split('').revese().join('')
}
},
mutations: {
setMsg (state, payload) {
state.msg = payload
}
}
})
<!--
Vuex中常用的就
state mutations actions
如果我們想要在頁面中渲染一些數(shù)據(jù)時，那么我們就可以把數(shù)據(jù)放在state中 state
如果我們要操作頁面元素修改數(shù)據(jù)時，那么我們就要在事件處理函數(shù)中this.$store.commit('mutation') 提交mutation 讓mutation去修改
如果我們要操作頁面元素獲取新的數(shù)據(jù)時，那么我們就要在事件處理函數(shù)中this.$store.dispatch('action') 然后在請求數(shù)據(jù)成功的時候，讓action去commit('mutation') 然后mutation修改數(shù)據(jù)
action中的代碼只涉及到，請求數(shù)據(jù) 提交mutation
mutation 只涉及到修改state
組件中設(shè)置到提交mutation或者分發(fā)action
-->
</script>以上為個人經(jīng)驗(yàn)，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
深入理解Vue響應(yīng)式原理及其實(shí)現(xiàn)方式
Vue的響應(yīng)式原理是Vue最核心的特性之一，也是Vue能夠?yàn)殚_發(fā)者提供高效便捷的開發(fā)體驗(yàn)的重要原因之一，這篇文章主要介紹了響應(yīng)式的原理及其實(shí)現(xiàn)方式，需要詳細(xì)了解可以參考下文2023-05-05
Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單
這篇文章主要介紹了Vue數(shù)據(jù)驅(qū)動表單渲染,輕松搞定form表單,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2019-07-07
vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素
這篇文章主要介紹了vue中實(shí)現(xiàn)監(jiān)聽數(shù)組內(nèi)部元素方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue使用require.context實(shí)現(xiàn)動態(tài)注冊路由
這篇文章主要介紹了vue使用require.context實(shí)現(xiàn)動態(tài)注冊路由的方法，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
淺談vue實(shí)現(xiàn)雙向事件綁定v-model的原理
vue使用v-model實(shí)現(xiàn)數(shù)據(jù)的雙向綁定，它會根據(jù)控件類型自動選取正確的方法來更新元素，本文就詳細(xì)的介紹一下原理，感興趣的可以了解一下2021-08-08
Vue mixins提供了一個非常靈活的方式來分發(fā)Vue組件中的可復(fù)用功能,通過全局混入和局部混入,可以將預(yù)定義的方法、數(shù)據(jù)等混合到Vue組件中,這種技術(shù)可以簡化代碼,提高開發(fā)效率,并允許在不同組件間共享功能2024-09-09
vue項(xiàng)目中l(wèi)ess的一些使用小技巧
前段時間一直在學(xué)習(xí)vue,開始記錄一下遇到的問題,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目中l(wèi)ess的一些使用小技巧,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-09-09
基于vue實(shí)現(xiàn)多引擎搜索及關(guān)鍵字提示
這篇文章主要為大家詳細(xì)介紹了基于vue實(shí)現(xiàn)多引擎搜索及關(guān)鍵字提示的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
詳解Vue-Router源碼分析路由實(shí)現(xiàn)原理
這篇文章主要介紹了Vue-Router源碼分析路由實(shí)現(xiàn)原理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了關(guān)于vite+vue3打包部署問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07