Vuex共享状态

最新推荐文章于 2024-07-19 21:03:03 发布

酒瘾。

最新推荐文章于 2024-07-19 21:03:03 发布

阅读量232

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_54227156/article/details/125193482

本文详细介绍了Vuex的状态管理机制，强调了其响应式特性，指出改变Vuex store中的状态只能通过提交mutation进行。同时，讲解了actions的作用，它允许包含异步操作，并通过dispatch触发。此外，还提到了严格模式的使用，确保状态变更的可控性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vuex 共享状态采用

1.Vuex 的状态存储时响应式的定义在store容器中的值发生改变后，那么相应的组件也会相应的得到高效更新

2.你不能直接改变 store 中的状态，改变store 中的状态的唯一途径就是显示地提交(commit) mutation

export default new Vuex.Store({
    //存储的是属性
    state:{
     
     },
     //和计算属性一样，也有缓存
     getters:{
    
     },
     //写的是方法
     //在  mutations  必须是同步函数
     mutations:{
     
      increment(state,payload){
      //第一个参数  state 代表 是  vuex  中存储的值
      //第二个参数调用事件函数时，需要传递的形参
        }
     },
     //actions  类似于 mutations
     //actions  提交的是  mutation(commit) ,而不是直接更改状态
     //actions  可以包含任意异步操作
     actions:{
     increment(content,payload){
       //第一个参数  content  表示上下文对象
       //第二个参数调用事件函数时，需要传递的形参
        }
     },
     //模块
     //里面可以写  state getters  mutations actions
     modules:{
     
     },
     // 严格模式
     strict:true

})

使用

console.log(this.$store)

commit 是用来触发  mutation 中的方法
-----mutation  中的第一个参数  就是  定义的事件名  第二个参数传递的是实际参数
//this.$store.commit('increment',10)
//this.$store.commit('increment',{num:10,age:20})




dispatch  是用来触发  actions中的方法
//传参方式和  mutation 一样
this.$store.dispatch('increment',10)