你的位置:首页 > 信息动态 > 新闻中心
信息动态
联系我们

VueX复习

2021-11-9 12:22:42

Vuex 是什么? | Vuex

  • state 存放状态(数据)  必须的
  • mutations state成员操作 -- 修改state中的数据   同步操作
  • getters er 加工state成员给外界  -- 获取state中的数据,类似于组件中的计算属性
  • actions 异步操作   异步操作 在vuex中可以进行异步操作(ajax),异步操作不能修改state
  • modules 模块化状态管理  多状态文件管理时使用

 

首先,Vue组件如果调用某个VueX的方法过程中需要向后端请求时或者说出现异步操作时,需要dispatch VueX中actions的方法,以保证数据的同步。可以说,action的存在就是为了让mutations中的方法能在异步操作中起作用。

如果没有异步操作,那么我们就可以直接在组件内提交状态中的Mutations中自己编写的方法来达成对state成员的操作。不建议在组件中直接对state中的成员进行操作,这是因为直接修改(例如:this.$store.state.name = 'hello')的话不能被VueDevtools所监控到。最后被修改后的state成员会被渲染到组件的原位置当中去。

安装

  • 方案1:在使用vue-cli命令创建项目时,勾选上vuex选项,即安装上vuex插件(推荐)
  • 方案2:通过后续的npm来进行安装 【npm i -S vuex】


src下创建store

 main添加

 同步修改 commit

home.vue中的methods

不生效,data换成计算属性

 store里的mutation

 

 异步修改

首先要有数据 => 模拟数据 => json文件

onAjax可以不用,代码可以直接写在mounted

 

 data里记得users:[]


 全局去用 getters

 

 简写

 使用


模块化

export default { }