vuex

vuex是一个专门为Vue.js应用程序开发的状态管理模式
可以把这个状态理解为data中的属性,可以供其他组件使用
vuex:有五种默认的基本对象

  • state:存储状态
  • getters:对数据获取之前的再次编译,可以理解为state的计算属性。在组件中使用$store.getters.fun()可以调用其中的方法
  • mutations:修改状态,同步操作。在组件中使用$store.commit('', params)。跟自定义事件类似
  • actions:异步操作,在组件中使用$store.dispath('')
  • modules:store的子模块,为了开发大型项目,方便状态管理而使用的

使用
mutations使用的坑:
this.$store.commit('mutationsReduceCount',n);直接这样调用是不可的,因为在Store的实例上除了getters其他几个都是私有属性,因此不允许直接调用,组件中使用的时候要通过```javascript
// 1、引入
import { mapMutations } from 'vuex'
// 2、映射
methods:{
...mapMutations([
'mutationsAddCount', //将 this.mutationsAddCount() 映射为 this.$store.commit('mutationsAddCount')
'mutationsReduceCount'
])
}

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,987评论 0 7
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 8,298评论 0 6
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 4,010评论 0 3
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,440评论 4 111
  • Vuex 的学习记录 资料参考网址Vuex中文官网Vuex项目结构示例 -- 购物车Vuex 通俗版教程Nuxt....
    流云012阅读 5,313评论 0 7