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