vuex中的state、getters、mutations、actions之間的關(guān)系解讀
更新時(shí)間：2023年10月27日 08:54:14 作者：代碼無邊，回頭是岸
這篇文章主要介紹了vuex中的state、getters、mutations、actions之間的關(guān)系,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
一、state的用法
<body>
<!--
想要獲取到state中的數(shù)據(jù)
{{$store.state.屬性}}
以為這個(gè)表達(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是一個(gè)對象，包含了各個(gè)組件中的狀態(tài)（數(shù)據(jù)），state是一個(gè)全局?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) {
// 返回一個(gè)函數(shù)
return (參數(shù)) => {
// 函數(shù)中返回?cái)?shù)據(jù) 我們就可以在函數(shù)中去添加形參
return 數(shù)據(jù)
}
}
}
}
在使用時(shí)，直接返回?cái)?shù)據(jù)的getter那么我們可以
{{$store.getters.getter}}
返回函數(shù)的，我們可以
{{$store.getters.getter(參數(shù))}}
不管是getter還是state，使用時(shí)，我們都可以直接
$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ù)
這個(gè)函數(shù)只需要管改變操作即可
然后在組件中的事件函數(shù)里提交對應(yīng)mutation即可
{
mutations: {
mutation函數(shù) (state, payload) {
// 因?yàn)閙utation改變的是state中的值，所以我們參數(shù)中有一個(gè)state方便我們快速改變對應(yīng)的值
// payload接收commit處傳遞過來的數(shù)據(jù)
}
}
}
組件函數(shù)中提交mutation
{
methods: {
函數(shù) () {
this.$store.commit('mutation名字', 數(shù)據(jù))
}
}
}
有些時(shí)候?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是一個(gè)和store一模一樣的對象，payload就是dispatch時(shí)傳遞過來的數(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這個(gè)數(shù)據(jù)，最簡單的
直接
模板中{{$store.state.msg}}
函數(shù)中this.$store.state.msg
想要好看，則
computed: {
msg () {
return this.$store.state.msg // 其他地方就可以直接使用msg
}
}
getter 在組件中使用時(shí)和state方法類似，要把state改成getters
想要使用reverseMsg
直接
模板中{{$store.getters.reverseMsg}}
函數(shù)中this.$store.getters.reverseMsg
想要好看，則
computed: {
reverseMsg () {
return this.$store.getters.reverseMsg
}
}
mutation
mutation是一個(gè)函數(shù)，它的作用就是修改state，而且修改state只能通過這一個(gè)方式
我們?nèi)绻胍诮M件中對某個(gè)數(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ù)中有一個(gè)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，這個(gè)context就是一個(gè)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í)，那么我們就可以把數(shù)據(jù)放在state中 state
如果我們要操作頁面元素修改數(shù)據(jù)時(shí)，那么我們就要在事件處理函數(shù)中this.$store.commit('mutation') 提交mutation 讓mutation去修改
如果我們要操作頁面元素獲取新的數(shù)據(jù)時(shí)，那么我們就要在事件處理函數(shù)中this.$store.dispatch('action') 然后在請求數(shù)據(jù)成功的時(shí)候，讓action去commit('mutation') 然后mutation修改數(shù)據(jù)
action中的代碼只涉及到，請求數(shù)據(jù) 提交mutation
mutation 只涉及到修改state
組件中設(shè)置到提交mutation或者分發(fā)action
-->
</script>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用props傳值時(shí)無法在mounted處理的解決方案
這篇文章主要介紹了使用props傳值時(shí)無法在mounted處理的解決方案，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue?click事件傳遞參數(shù)--方法/教程/實(shí)例,本文用示例介紹Vue中事件傳參的方法，采用click這個(gè)事件進(jìn)行展示，結(jié)合示例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-12-12
從零開始在vue-cli4配置自適應(yīng)vw布局的實(shí)現(xiàn)
這篇文章主要介紹了從零開始在vue-cli4配置自適應(yīng)vw布局，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要為大家介紹了Vue2 cube-ui時(shí)間選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
這篇文章主要介紹了vue如何使用模擬的json數(shù)據(jù)查看效果，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法
這篇文章主要給大家介紹了關(guān)于Vue動態(tài)生成el-checkbox點(diǎn)擊無法賦值的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
這篇文章主要介紹了vue子組件如何使用父組件傳過來的值，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù)問題
這篇文章主要介紹了Vue使用.sync 實(shí)現(xiàn)父子組件的雙向綁定數(shù)據(jù),需要的朋友可以參考下2019-04-04
關(guān)于element-ui的隱藏組件el-scrollbar的使用
這篇文章主要介紹了關(guān)于element-ui的隱藏組件el-scrollbar的使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05
vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例
今天小編就為大家分享一篇vee-validate vue 2.0自定義表單驗(yàn)證的實(shí)例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08