【Vue | 补洞 | 01】Vuex 环境搭建及基本使用

  用惯了脚手架的你，是否还记得搭建 Vuex 环境时要用 Vuex.Store ？本期讲解 Vuex 环境从0到1的搭建，也欢迎持续关注新系列文章：[Vue 补洞] 系列，用久了 Vue2，总有一些遗漏的知识点，通过该系列文章一起更深入理解一些看似简单的点吧！

1、目的

  供任意组件间进行通信

2、state、actions、mutations 的关系

  犹如餐厅中的菜单、服务员与后厨的关系

1. state：存放数据的地方（菜单）
2. actions：用于业务逻辑处理或异步处理后，将数据传递给 mutations 完成最终加工（服务员）
3. mutations：真正修改 state 中数据的地方（后厨）

3、搭建 vuex 环境

1. 以 vue2.x 为例，安装 vuex3.x版本来适配（2022.2.7之后，vue3 成为默认版本，vuex4.x 也成为了默认版本）

npm i vuex@3

2. 编写 store/index.js

  注意：需要先通过 Vue.use(Vuex)，才能使用 Vuex 中的构造函数 Store

// src/store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const state = {}
const actions = {}
const mutations = {}
const getters = {}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  getters,
})

3. 将 store 引入 main.js

  在 new Vue 中引入 store 后，就可以在 Vue 原型对象上通过 $store 进行访问

// main.js
import Vue from 'vue'
import App from './App.vue'

import store from './store/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

4、state 写法

1. 声明

// src/store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

Vue.use(Vuex)

const state = {
  userName: 'Jokerls',
  project: ['Vue', 'HTML', 'JavaScript'],
}
...

export default new Vuex.Store({
  state
  ...
})

2. 在组件中获取数据

<h2>用户名：{{ $store.state.userName }}</h2>

5、actions 写法

  注意 actions 中的函数接收两个参数(context, value)，context 包含在函数中可能用到的 上下文，如 commit（因为执行 actions 之后需要将数据交给 mutations 进行最终加工）

1. 声明

// src/store/index.js
const actions = {
  addProject(context, value) {
    // 转交给 commit 进行处理
    context.commit('ADD_PROJECT', value)
  }
}
...

2. 使用

<button @click="addProject">添加科目</button>

addProject () {
   this.$store.dispatch('addProject', 值)
}

6、mutations 写法

一般来说，mutations 中的函数使用大写来与 actions 作区分

1. 声明

// src/store/index.js
const mutations = {
  ADD_PROJECT(state, value) {
    state.projectList.push(value)
  }
}
...

2. 使用

<button @click="addProject">添加科目</button>

addProject () {
   this.$store.commit('ADD_PROJECT', 值)
}

7、getters 写法

   类似 computed 写法，接收一个参数 state，在 不改变原数据 的情况下，返回一个希望展示的值

1. 声明

// store/index.js
const getters = {
  userFullName(state) {
    return state.userName + '乐乐'
  }
}

2. 使用

<h2>用户名：{{ $store.getters.userFullName }}</h2>

8、总结

• state 存放数据；actions 中转数据；mutations 修改实际数据；getters 返回一个自定义格式化后的数据。
• 开发者工具中，只监听得到 mutations 的变化；因此一般不在 actions 中直接修改 state（尽管可以，但不推荐）
• actions 常用于下面两种场景
  • 要操作的数据需要通过 接口获取，获取后再传给 mutations 进行处理的；
  • 要操作的数据需要经过 逻辑业务 处理，比如限定数值>100的数才能参与后续的逻辑，之后再传给 mutations 进行处理的；