【Vuex】Vuex详解，一篇文章搞懂Vuex详细使用过程和代码编写

本篇博客跟学视频链接：Vuex从入门到实战_bilibili

1. 组件之间数据共享

• 父向子传值：v-bind 属性绑定

• 子向父传值：v-on 事件绑定

• 兄弟组件之间共享数据：EventBus

  • $on 接收数据的那个组件

  • $emit 发送数据的那个组件

2. Vuex概述

• 实现组件全局（数据）管理的一种机制，可以方便的实现组件之间共享数据，不同于上述三种传递值的方式。
• 可以把vuex当成一个store仓库，可以集中管理共享的数据，并且存储在vuex中的数据都是响应式的，数据与页面同步。
• 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中。

3.Vuex基本使用

1）安装vuex依赖

npm install vuex --save

2）导入vuex包

import Vuex from 'vuex'
Vue.use(Vuex)

3）创建store对象

const store = new Vuex.Store({
    // state 中存放全局共享的数据
    state: {count:0}
})

4）store对象挂载到vue实例中

new Vue({
	el: '#app',
	render: h=>h(app),
	router,
	// 创建的共享数据挂载到vue实例
	// 所有组件能够直接从store中获取到全局的数据
	store
})

5）利用vue ui脚手架创建vue项目

复习一下吧：[保姆级教学]使用Vue ui创建一个完整的vue项目_使用vue ui创建vue项目-CSDN博客

• 详见另一篇文档

3. 项目基础知识

1）格式化

• 项目下创建文件.prettierrc，应与.gitignore同级，两句代码分别代表：去除分号，用单引号替换双引号。

{
    "semi": false, 
    "singleQuote": true
}

2）git提交

4. Vuex核心概念

1）State

• State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

 // 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({
 	state: { count: 0 }
 })

1：访问State方法一

• 注意在唯一根组件template中，可以省略this不写

2：访问State方法二

• 导入mapState并把所需要的State域中的属性映射为当前组件的计算属性。

<template>
    <div>
        <h3>当前最新的count值为:{{ count }}}</h3>
        <button>-1</button>
    </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
    data() {
        return {}
    },
    // 把State全局域中的数据映射为我当前组件的计算属性
    computed: {
        ...mapState(['count'])
    }
}
</script>

2）Mutation

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义唯一的state域变量
  state: {
    count: 0
  },
  // 只有 mutations 中定义的函数，才有权利修改 state 中的数据
  // 注意mutations中的方法第一个参数必须是state而且必须带,否则无法调用state中的变量
  mutations: {
    // 不带参mutations
    add(state) {
      state.count++
    },
    // 带参数的mutations
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  }
})

1：触发Mutation方法一

• 在vuex中不允许组件直接去修改全局域中的数据，必须通过Mutation来变更Store中的数据。 通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化（可以监控是谁更改了State）。

addition.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
    <h3>{{$store.getters.showNum}}</h3>
    <!-- 点击该按钮调用Mutation使count值+1 -->
    <button @click="btnHandler1">+1</button>
    <!-- 点击该按钮调用Mutation使count值+N -->
    <button @click="btnHandler2">+N</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  // methods方法实际调用的是vuex中的Mutation来改变State域中的值
  methods: {
    btnHandler1() {
      this.$store.commit('add')
      // this.$store.count++; // 不要在本组件中直接修改State域中数据的值
    },
    btnHandler2() {
      // commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
  }
}
</script>

2：触发Mutation方法二

• 同样的，用一个mapMutations将全局的Mutation函数映射到本组件中。

subtraction.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{count}}</h3> -->
    <h3>{{showNum}}</h3>
    <button @click="btnHandler1">-1</button>
    <button @click="subN(3)">-N</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    ...mapMutations(['sub', 'subN']), // 注册sub和subN函数
    btnHandler1() {
      this.sub()
    }
  }
}
</script>

3）Action

• 如果我们想书写一个异步操作，如单击+1后等待1s后state域中的值才会发生变化，我们可以用js中的定时器来实现，但是vue不能在mutations函数中执行异步操作，此时我们引入Action。
• Action 用于处理异步任务。如果通过异步操作变更数据，必须通过 Action，而不能使用 Mutation，但是在 Action 中还是要通过触发Mutation 的方式间接变更数据。

1：触发Action方式一

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义唯一的state域变量
  state: {
    count: 0
  },
  mutations: {
    add(state) {
      // 不要在 mutations 函数中，执行异步操作
      // setTimeout(() => {
      //   state.count++
      // }, 1000)
      state.count++
    },
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  actions: {
    addAsync(context) {
      setTimeout(() => {
        // 在 actions 中，不能直接修改 state 中的数据；
        // 必须通过 context.commit() 触发某个 mutation 才行
        context.commit('add')
      }, 1000)
    },
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    },
})

• commit函数用于触发Mutations，而dispatch函数用于触发Action，注意Action无法直接修改state域中的值，还是必须通过Mutations来间接的修改state域中的值。

Addition.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{$store.state.count}}</h3> -->
    <h3>{{$store.getters.showNum}}</h3>
    <!-- 点击该按钮调用Mutation使count值+1 -->
    <button @click="btnHandler1">+1</button>
    <!-- 点击该按钮调用Mutation使count值+N -->
    <button @click="btnHandler2">+N</button>
    <button @click="btnHandler3">+1 Async</button>
    <button @click="btnHandler4">+N Async</button>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  // methods方法实际调用的是vuex中的Mutation来改变State域中的值
  methods: {
    btnHandler1() {
      this.$store.commit('add');
      // this.$store.count++; // 不要在本组件中直接修改State域中数据的值
    },
    btnHandler2() {
      // commit 的作用，就是调用 某个 mutation 函数
      this.$store.commit('addN', 3)
    },
    // 异步地让 count 自增 +1
    btnHandler3() {
      // 这里的 dispatch 函数，专门用来触发 action
      this.$store.dispatch('addAsync')
    },
    btnHandler4() {
      this.$store.dispatch('addNAsync', 5)
    }
  }
}
</script>

2：触发Action方法二

• 同样的可以使用mapActions数据结构来引入在store.js中注册过的Action和mapState、mapMutations同理。注意用mapMutations、mapActions注册过的方法可以直接根据函数名来调用。

Subtraction.vue

<template>
  <div>
    <!-- <h3>当前最新的count值为：{{count}}</h3> -->
    <h3>{{ showNum }}</h3>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(5)">-N Async</button>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count']),
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    // 注意这里的subAsync和subNAsync都可以直接作为函数被调用，不用像btnHandler1一样新开一个函数来调用
    // 由map注册过的方法都可以直接调用
    btnHandler1() {
      this.sub()
    }
  }
}
</script>

4）Getter

• Getter用于对Store中的数据进行加工处理并形成新的数据，类似于Vue中的计算属性，Store中的数据发生变化，Getter中的数据也发生变化，存在一个响应关系。

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义唯一的state域变量
  state: {
    count: 0
  },
  mutations: {
	···
  },
  actions: {
    ···
  },
  // getter方法模拟显示当前最新的值
  getters: {
    showNum(state) {
      return '当前最新的数量是【' + state.count + '】'
    }
  }
})

1：使用getters的两种方法

5. Vuex综合案例

• 详见于 vuex_demo2，里面有我非常详细的注释。
• 注意打开新项目时应当删除module_nodes和package-lock.json两个文件夹，并输入指令npm i(即install)和npm run serve来启动服务。