为什么要用vuex？

说vuex之前，我们先了解一下vue的组件通信，这样更加方便的让我们理解vuex

组件通信的类型

• 父子通信
• 跨级通信
• 兄弟通信
• 路由视图级别通信

通信解决方案

- props/$emit（父子通信）
- $refs/ref（父子通信）
- $children/$parent（父子通信）
- $attrs/$listeners（父子通信、跨级通信）
- provide/inject（父子通信、跨级通信）
- eventBus（父子通信、跨级通信、兄弟通信）
- vuex（父子通信、跨级通信、兄弟通信、路由视图级别通信）
- localStorage/sessionStorage等基于浏览器客户端的存储（父子通信、跨级通信、兄弟通信、路由视图级别通信）

父子通信

prop/$emit

子组件的props选项能够接收来自父组件数据。但也只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式分为静态和动态两种方式

1. 子组件通过props选项来声明一个自定义的属性，然后父组件就可以在嵌套标签的时候，通过这个属性往子组件传递数据了。
2. 我们已经知道了可以像上面那样给 props 传入一个静态的值，但是我们更多的情况需要动态的数据。这时候就可以用 v-bind 来实现。通过v-bind绑定props的自定义的属性，传递去过的就不是静态的字符串了，它可以是一个表达式、布尔值、对象等等任何类型的值。

$refs/ref

我们先准备一个代码场景
Home组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>Home</h1>
    <Father></Father>
  </div>
</template>

<script>
import Father from '@/components/Father.vue'

export default {
  name: 'Home',
  components: {
    Father
  },
}
</script>

Father组件

<template>
    <div>
        <h2>Father</h2>
        <Child></Child>
    </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
    name:"Father",
    components: {
        Child
    }
}
</script>

Child组件

<template>
    <div>
        <h3>Child</h3>
    </div>
</template>

<script>
export default {
    name:"Child"
}
</script>

我们现在页面的关系是，Child是Father的子组件，Father是Home的子组件

现在对代码做一下调整
home组件

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1>Home--<button @click="fnHome">按钮</button></h1>
    <Father ref="ff"></Father>
  </div>
</template>

<script>
import Father from '@/components/Father.vue'

export default {
  name: 'Home',
  components: {
    Father
  },
  methods: {
    fnHome(){
      console.log(this.$refs.ff.val)
    }
  },
}
</script>

Father组件

<template>
    <div>
        <h2>Father</h2>
        <Child></Child>
    </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
    name:"Father",
    data() {
        return {
            val:"我是Father里边的val"
        }
    },
    components: {
        Child
    },
}
</script>

这样我们就实现了通过$refs/ref实现父子通信

$children/$parent

这个其实特别简单，基本就是字面意思

我们还拿Home来说

  methods: {
    fnHome(){
      // console.log(this.$refs.ff.val)
      console.log(this.$children)
    }
  },

这样很简单就实现了我们要获取到的子级

如果要子级获取到父级也是一样的

<template>
    <div>
        <h2>Father--<button @click="fnFather">按钮</button></h2>
        <Child></Child>
    </div>
</template>

<script>
import Child from '@/components/Child.vue'
export default {
    name:"Father",
    data() {
        return {
            val:"我是Father里边的val"
        }
    },
    components: {
        Child
    },
    methods: {
        fnFather(){
            console.log(this.$parent)
        }
    },
}
</script>

这样我们就实现了通过$children/$parent实现父子通信

父子通信、跨级通信

$attrs/$listeners

Home组件

...
    <Father ref="ff" msg="msg"></Father>
...

export default {
  ...
  data() {
    return {
      msg:"我叫msg，但我的内容是Home"
    }
  },
  ...
}

Father组件

export default {
    ...
    methods: {
        fnFather(){
            console.log(this.$attrs)
        }
    },
}

现在我们通过$attrs获取到了父组件传来的数据

---

Child组件

<template>
    <div>
        <h3>Child--<button @click="fnChild">按钮</button></h3>
    </div>
</template>

<script>
export default {
    name:"Child",
    methods: {
        fnChild(){
            console.log("Chile接收到的",this.$attrs);
        }
    },
}
</script>

注意：这里直接跨级获取是获取不到的，需要在Father组件内通过v-bind绑定一下$attrs，这理解相当于解构赋值了一样

...
<Child v-bind="$attrs"></Child>
...

现在我们通过$attrs跨级获取到了父组件的父组件的数据

provide/inject

我们现在Home组件内设置一下provide，注意它的级别是和data与methods同级别的

export default {
  name: 'Home',
  components: {
    Father
  },
  data() {
    return {
      msg:"我叫msg，但我的内容是Home"
    }
  },
  provide:{
    val:"我是Home里边provide的val"
  },
  methods: {
    fnHome(){
      // console.log(this.$refs.ff.val)
      // console.log(this.$children)
    }
  },
}

然后我们在需要接收的子组件或者子组件的子组件内定义一个属性

export default {
    name:"Child",
    inject:['val'],
    methods: {
        fnChild(){
            console.log(this.val)
        }
    },
}

这里我们通过provide/inject实现了跨级通信，这两个属性可以做父子通信也可以做跨级通信，但是他其实已经无视了这种关系，不管你在哪里，这要写上这两个属性就可以了，不存在子级还是子级的子级
这两个主要用在开发高阶插件/组件库时使用。不推荐应用于普通应用程序代码中

父子通信、跨级通信、兄弟通信

这时候我们先创建一个兄弟组件

<template>
    <div>
        我是Uncle
    </div>
</template>

<script>
export default {
    name:"Uncle"
}
</script>

eventBus

是用这个方法之前我们需要新建一个js页面，然后再导出一个vue实例

//eventBus.js

import Vue from 'vue'
export default new Vue();

在需要使用时，需要先引入eventBus.js

在你需要传递的页面需要有一个属性来传递，我们这里选择的是Child组件去传递数据，Uncle组件去接收数据

Child组件

<template>
    <div>
        <h3>Child--<button @click="fnChild">按钮</button></h3>
    </div>
</template>

import eventBus from '../eventBus.js'
export default {
    name:"Child",
    inject:['val'],
    methods: {
        fnChild(){
			// 传递方
            eventBus.$emit('abc','我是通过Child传递出去的abc');
        }
    },
}

Uncle组件

<template>
    <div>
        我是Uncle--<button @click="fnUncle">按钮</button>
    </div>
</template>

<script>
import eventBus from '../eventBus.js'
export default {
    name:"Uncle",
    data() {
        return {
            val:''
        }
    },
    created() {
        eventBus.$on('abc',v=>{
            this.val = v
        })
    },
    methods: {
        fnUncle(){
            console.log(this.val)
        }
    },
}
</script>

我们要实现的效果是，点击Child按钮传递出来一个数据，然后Uncle去接收数据，并把接收到的数据赋值给我们data里的val，然后输出出来
$emit(事件名，实参) ：自定义事件
$on(事件名，回调函数(形参)) ：监听事件

红框是直接点击Uncle按钮输出出来的数据，绿框是先点击Child后在点击Uncld按钮

父子通信、跨级通信、兄弟通信、路由视图级别通信

localStorage/sessionStorage等基于浏览器客户端的存储

这个方法属于找了外援，是让浏览器帮我们去代存，直接跳开了vue和组件，所以他什么通信都可以执行，但是它的存储、获取、更新都比较死板，而且他是在浏览器客户端存储的，如果对客户端进行操作的话会直接影响到我们应用程序，所以我们不要太依靠这个方法，太依靠的话，如果用户清理了浏览器缓存，那我们的程序缓存就也没了，所以不推荐经常使用！

vuex

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式

这种状态管理模式包含：

• State : 状态数据源
• View : 使用状态数据源的视图
• Actions : 修改更新数据源的操作

这种模式遵循的是 单向数据流 模式

vuex的存储模式，他会去把数据存在内存中，也像是一样挂在一个其他地方，我不在某个组件里存，我直接挂在内存中，你去我当前应用程序中所占用的内存中找就可以了，也是一种另类的跳开组件关系，直接可以拿到数据

vuex 的工作流

• State : 存储应用状态数据（React 中的 State）
• Vue Component : 显示 State
• Actions : 提交修改 State 的动作（包括异步行为）（React 中的 action）
• Mutations : 唯一更改 State 的位置（React 中的 Reducer）

创建一个 Store
其实我们需要去做的很简单，在用vue创建项目的时候直接选择vuex就可以了，然后我们现在去简单的设置一下

//src文件下的store文件内的index.vue
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    title:"嵩山少林",
    content:"有多少英雄豪杰把你敬仰"
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

我们获取到数据呢也比较简单，有两种方式

1. 直接created去获取，然后复制给自己data内部提前转备好的空变量内部，但是缺点是钩子函数没有监听到我们的数据，在数据发生改变时页面不能够随着数据作出相应的变化。处理方法是直接去computed中去获取数据

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <h1> {{t}} </h1>
    <h1> {{c}} </h1>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      // t:'',
      // c:''
    }
  },
  // created() {
  //   this.t = this.$store.state.title;
  //   this.c = this.$store.state.content;
  //   console.log(this.$store.state);
  // },
  computed: {
    t(){
      return this.$store.state.title;
    },
    c(){
      return this.$store.state.content;
    }
  },
}
</script>

2. 直接在页面内调用，但是因为书写比较多，可能会出现写错代码的情况，一定要注意！

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h1> {{this.$store.state.title}} </h1>
    <h1> {{this.$store.state.content}} </h1>
  </div>
</template>

浏览器反馈


上述两种方法推荐第一种，第一种的获取方法视情况而定

这是我们用vuex做的跨视图路由跳转

辅助函数 mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键，通常我们把 store 的 state 通过 mapState 函数映射到组件的 computed 上

数组的形式

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3> {{title}} </h3>
    <h3> {{content}} </h3>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:"About",
  // 正常computed的方式
  // computed: {
  //   title(){
  //     return this.$store.state.title;
  //   },
  //   content(){
  //     return this.$store.state.content;
  //   }
  // },

  // 数组的方式
  computed: mapState(['title','content']),
}
</script>

浏览器反馈

对象的形式

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3> {{title}} </h3>
    <h3> {{content}} </h3>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:"About",
  
  // 对象的方式
  computed: mapState({
      title: 'title',
      return content += `，你看，我这句话是新加的`;
  })
}
</script>

浏览器反馈

使用扩展运算符组合

通过对象扩展运算符，可以把 mapState 返回的 state 属性与组件已有计算属性进行融合

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <h3> {{title}} </h3>
    <h3> {{content}} </h3>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name:"About",// 对象的方式
  computed: {
    result(){
      return this.val * 100
    },
    ...mapState({
      title:'title',
      content:({content}) => {
        return content += `，你看，我这句话是新加的`;
      }
    })
  },
}
</script>

浏览器反馈

getters

1. 类似组件中的computed,派生数据————在数据出门后，到目的地之前，进行一道加工！！
2. 与组件计算属性一样，默认是通过属性的方式去访问 getters 中的数据的，这种方式与组件的计算属性一样，也是会缓存结果的
3. 还可以通过闭包函数的形式返回一个函数，来实现给 getters 函数传参，需要注意的是这种方式不支持结果缓存
4. 与 mapState 函数类似，通常映射到组件的 computed 上

mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation（类似 redux 中的 action + reducer），Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)

注意点：mutation 中的函数不要直接调用

提交

store.commit(type, payload)
// or
store.commit({
    type: ...,
    payload: ...
})

type

要提交的 mutation 回调函数名称，type 为固定的 key

payload

载荷：提交的额外数据，任意格式

mutation 函数

mutation 中的函数被 commit 执行的时候，接收两个参数

• 第一个参数：state 对象
• 第二个参数： commit 提交的 payload

在 mutation 函数中，我们就可以通过 state 对象进行状态数据的修改

使用辅助函数 mapMutations

mapMutations 函数的使用与 mapState 和 mapGetters 类似，但是其一般是把组件的 methods 映射为 store 的 mutations 的 commit 调用

mutation 函数必须是同步的

commit 方法没有返回值

actions

action 中的函数与 mutation 中的函数类似，但是它主要用来进行异步任务的处理，然后通过提交 mutation 来修改 state

注意：action 中的函数不要直接修改 state

提交

store.dispatch(type, payload)
// or
store.dispatch({
    type: ...,
    payload: ...
})

action 任务需要通过 dispatch 方法来提交（派发），与 commit 类似

dispatch 方法有返回值，且一定返回一个 promise 对象

action 函数

action 中的函数执行的过程中也接受两个参数

• 第一个参数：store 对象
• 第二个参数： dispatch 提交的 payload

使用辅助函数 mapActions

与 mapMutations 函数类似，把组件的 methods 映射为 store 的 actions 的 dispatch 调用