Vuex &Vuex模块化

Vuex &Vuex模块化

为什么要使用vuex？

如今前后端分离，前端已然成为一个独立的开发单位，一个页面会被分为多个模块来开发

 

 

模块与模块之间如何关联？

1.父传子

2.子传父

3.兄弟之间传递

 

那么非关系型组件怎么办？

答案：vuex来解决？

如上图，有三个模块：

1. state：共享状态数据也就是存储非关系型组件数据的地方

2. mutaition：修改statue必须通过它，并且它只能执行同步代码

3. actions：执行异步操作，数据提交给mutaition进行修改，从而传递给statue

4. 我们用vuex的目的是为了与非关系的vue组件关联传递数据，那么这个时候的关系是如何的呢？ state可以直接传递数据 组件也可以调用actions

5. 这样他们就形成了闭环

Vuex 的基础知识以及用法

初始化vuex

1. 下载vuex：yarn add vuex 或 npm i vuex --save

2. 在main.js中引入vuex ：import Vuex from 'vuex'

3. 在main.js中 Vue.use(Vuex) => 调用了 vuex中的 一个install方法

4. const store = new Vuex.Store({...配置项})

5. 挂载store，在根实例配置 store 选项指向 store 实例对象

 

Vuex三大板块

1.定义state

它是用来放置所有公共状态的属性，如果你有一个公共状态数据，你需要定义在state对象中

定义state

 

既然存入数据了，那么如何获取到定义的count？

有三种方式：原始形式、计算属性、辅助函数

1. 第一种方式：原始形式，插值表达式

 

组件中可以使用 this.$store