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是一个对象，包含了各个组件中的状态（数据），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进行分发
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 () {
// 在这里进行分发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或者分发action
-->
</script>以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
最近工作中遇到一个需求，是要做一个页面放张大表格用来显示数据项，纯粹为了view层操作方便，就用了vue做渲染。然而又被提出了一个需求，需要相邻的相同值的行数据项进行单元格合并，这就醉了。没办法，只能想办法解决，下面通过这篇文章来一起看看吧。2016-11-11
本文主要对介绍利用Vue.js 的递归组件，实现了一个最基本的树形菜单。具有很好的参考价值，下面就跟着小编一起来看下吧2016-12-12
vue-loader和webpack项目配置及npm错误问题的解决
这篇文章主要介绍了vue-loader和webpack项目配置及npm错误问题的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要介绍了Vue发送Formdata数据及NodeJS接收方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-06-06
本篇文章主要介绍了详解webpack+vue-cli项目打包技巧 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue CLI 2.x搭建vue(目录最全分析),小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
在Vue中Refs是对DOM元素或已安装到DOM的其他组件实例的引用,下面这篇文章主要给大家介绍了关于Vue3中refs使用的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-08-08
这篇文章主要介绍了vue-rx的初步使用教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在实际项目中，我们可能需要对请求进行“防抖”处理。本文主要实现axios中取消请求及阻止重复请求，具有一定的参考价值，感兴趣的可以了解一下2021-08-08
这篇文章主要介绍了vue深复制的相关资料，非常不错，具有参考借鉴价值，需要的朋友参考下2018-01-01
最新评论