介绍

npm i --save vuex

vuex 响应式数据 共享组件的数据，脱离组件的   状态管理模式 集中式存储管理

管理什么样的数据？

• 复杂   大型项目才使用
• 比如用户的登录状态，用户名称，头像，地理位置
• 商品的收藏，购物车的物品等

通过在根实例注册 store  store 就会注册在每个组件，用$store访问，组件可以通过this.$store 访问 store 内部的方法和属性  ****

this.$store.state.[moudle?].stateName

State

• vuex 的状态(**存放数据的仓库**)
• ** ****单一状态树(单一数据源) **只有一个$store对象 所有状态还是数据都是在一个$store 中
• State 中的数据都会被加入到 vue 的响应式系统中，而响应式系统会监听属性的变化，当属性发生变化时，会通知所有的界面用到该属性的地方，让界面发生刷新。
  • 但这个响应式有一个前提就是   必须要初始化过的属性，才能响应式更新。(即添加新的属性，或删除，页面不会属性)。但可以在 mutation 中使用 Vue 的 set、delete 方法。添加新的属性，或删除属性。并响应式刷新页面
  • 
  • 

Mutation

（因为 vue 在谷歌浏览器上有个DevTools(vue 调试工具)工具用于监听各组件对 state 的修改记录。必须要经过 mutation，该工具才能监听到。）

• 同步函数，官方推荐不要在 mutation 中进行异步操作，因为 devtools 监听不到
• **传递参数  **mutation 中的事件第一个参数是 state,第二个参数是payload(需要修改的重要参数)。
  • 调用传递过来的参数：第二个参数可直接使用传递过来的参数名
  • 但注意如果 commit 是特殊提交方式，传递的属性就是个对象。而 payload 也会变成个对象。具体属性，需要 payload.属性名。获取。
• 名字写成常量   后期好管理。
  • 
  • 
  • 
  • 

commit 提交方法

• 普通提交
  • 
  • 
  • 第二种提交方式 count 传递过去就是个 payload 对象了。

Actions

• 异步逻辑的代码要在 action 里面写，mutation 不写异步代码
• 有异步任务，组件传递参数 通过dispatch提交给 action 使 action 派发任务给 mutation 修改参数。
• 
• 
• **参数  ****context 可以写成   解构形式   传递。**
  • 

getters

vuex 的计算属性

一个属性是 state，第二个属性是 getters。

当调用 getters 并且想传递参数时，在封装 getters 方法时，其参数必须写到 return 的一个函数的参数中。回调得时候就是这个函数对数据进行处理。

modules

• 模块分离套娃
  • 每个模块也有他自己独立的 state,mutation，action,getters。
• state 调用
  • 
• mutation
  • 组件 motheds 中的 commit 提交的写法不变。因为 mutation 方法在大模块还是小模块都要唯一，不要重复。
• getters
  • getters 中第二个参数 getters 获取的是当前模块的 getters。但它还有第三个参数。rootState –可获取大模块的 state 属性
• action
  • action 中的 commit 是 commit 当前的模块中的 mutation 的
  • context 中 state 是局部状态，rootState 则可以获取根节点(大模板)的状态

>>抽离 VUX，文件目录组织方便管理。

• 除了 state 全部抽离出 store 实例文件外。
  • 

---

---

---

>> vuex 的辅助函数

import  { **mapGetters,  mapActions， ****mapState，** mapMutations } from “vuex”

map**State 通过扩展运算符将 store.state.data 映射为  **this.data** **这个**this 很重要，**这个映射直接映射到当前**Vue 的 this 对象**上。

**map**xxx 映射后，无论是计算属性还是 state, 还是 action 或者是 mutation。都可以用**vue 实例中的 this 点出来****。**

methods: {

//直接引入 actions 中的方法 名字需要一一对应

…mapActions([‘asyncAdd’, ‘jian’]),

},

//自定义名字

…mapActions({

‘add’:  ‘asyncAdd’ ,

‘jian’:   ‘jian’

}),

computed:{

//直接引入 getters 中的方法，或者导入 state，将其映射为 vue 实例中的计算属性，然后多配和 watch 监听该计算属性变化   实现具体功能业务。名字需要一一对应

…mapGetters([‘getCountDouble’])

…mapState([‘data1’, ‘data2’]), 放在计算属性中。

//自定义名字

…mapGetters({

getCount:’**getCountDouble**‘ //this.getCount 对应 getters 的 getCountDouble

})

}

传参数： <button @click=’jian(1)‘>-

---

事件处理总线\事件总线

类 vuex

**    eventBus  emit（类似公共的组件，发送广播）  on（监听到组件的改变，接受广播）**

** **

创建一个仓库文件 bus.js 就是一个 vue 实例

let Bus = new Vue();

export default Bus;

其他组件

**  **

import Bus from ‘@/bus/bus.js’

>>或者 vue 原型中添加一个   名为$bus 的 vue 实例

组件 1 Bus/this.$bus.$emit(‘事件名’，args)  组件 1 针对‘事件名’发送参数出去

组件 2 Bus.$on(‘事件名’，（args）=>{ }) **组件 2 监听 ‘事件名’ ****args 就是 emit 传递过来的参数**

Bus.$off(‘事件名’); //清除监听，组件销毁了就不需要监听

注意：如果组件要销毁，销毁后是监听不到事件的，需要缓存组件（keep-alive）

---

如果遇到组件有时要显示，有时要隐藏的话，组件间传数据用 eventbus 的话，需要用  v-show

v-if  用 eventbus  不生效（隐藏）

---

---

---

---