VueX复习

Vuex 是什么? | Vuex

VueX复习

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

VueX复习 

首先,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

VueX复习

 main添加

VueX复习

 同步修改 commit

home.vue中的methods

VueX复习

不生效,data换成计算属性

VueX复习

 store里的mutation

VueX复习

 VueX复习

 异步修改

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

VueX复习

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

 VueX复习

 data里记得users:[]


 全局去用 getters

 VueX复习

 简写

VueX复习

 使用

VueX复习


模块化

export default { }

VueX复习

 VueX复习

 VueX复习

 VueX复习

 VueX复习


 

 

上一篇:vue与django交互时处理id相关问题


下一篇:vue:app.vue中添加监听beforeunload事件,即当浏览器窗口关闭或刷新时删除vuex中的数据