Vuex &Vuex模块化
为什么要使用vuex?
如今前后端分离,前端已然成为一个独立的开发单位,一个页面会被分为多个模块来开发
模块与模块之间如何关联?
1.父传子
2.子传父
3.兄弟之间传递
那么非关系型组件怎么办?
答案:vuex来解决?
如上图,有三个模块:
-
state:共享状态数据也就是存储非关系型组件数据的地方
-
mutaition:修改statue必须通过它,并且它只能执行同步代码
-
actions:执行异步操作,数据提交给mutaition进行修改,从而传递给statue
-
我们用vuex的目的是为了与非关系的vue组件关联传递数据,那么这个时候的关系是如何的呢? state可以直接传递数据 组件也可以调用actions
-
这样他们就形成了闭环
Vuex 的基础知识以及用法
初始化vuex
-
下载vuex:yarn add vuex 或 npm i vuex --save
-
在main.js中引入vuex :import Vuex from 'vuex'
-
在main.js中
Vue.use(Vuex)
=> 调用了 vuex中的 一个install方法 -
const store = new Vuex.Store({...配置项})
-
挂载store,在根实例配置 store 选项指向 store 实例对象
Vuex三大板块
1.定义state
它是用来放置所有公共状态的属性,如果你有一个公共状态数据,你需要定义在state对象中
定义state
既然存入数据了,那么如何获取到定义的count?
有三种方式:原始形式、计算属性、辅助函数
1. 第一种方式:原始形式,插值表达式
组件中可以使用 this.$store