Vuex核心概念与使用

1. 官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式
2. Vuex：实现集中式状态（数据）管理的插件
3. 作用：对Vue中多个组件的共享状态进行集中式管理（读/写），是一种组件间的通信方式，适用于任意组件间的通信
4. 使用版本
   1. Vue2使用vuex@3.xx.xx版本
   2. Vue3使用vuex@4.xx.xx版本

搭建Vuex环境

1. 安装vuex：npm install vuex --save（注意版本号对应）
2. 在项目中新建store文件夹，在该文件夹下创建index.js文件
3. 在index.js文件中进行Vuex配置

   // 引入vue
   import Vue from 'vue'
   // 引入Vuex
   import Vuex from 'vuex'
   // 使用Vuex
   Vue.use(Vuex)
   
   // 创建并且导出store
   export default new Vuex.Store({
       state: {},
       actions: {}
       mutations: {}
   })
   

4. 在main.js文件中引入store并挂载

   import store from './store/index'
   
   new Vue({
       el: '#app',
       store,
       render: h => (App)
   })
   

Vuex工作原理图

Vuex核心概念

State

1. 作用：用于保存公共数据

Actions

1. 作用：用于进行处理异步操作、发送ajax请求、处理业务逻辑等操作

Mutations

1. 作用：Vuex的store中state状态的更新唯一方式就是通过 — 提交Mutations
2. 通常情况下，Vuex要去我们Mutation中的方法必须是同步方法，原因如下
   1. 当我们使用devtools时，可以devtools可以帮助我们捕捉mutation的状态
   2. 但是如果是异步操作，那么devtools将不能很好的追逐这个操作什么时候会被完成
   3. 所以在mutation中不要定义异步操作，将异步操作放入Action中

getters

1. 作用：类似于组件中的computed计算属性，可以对state中的数据进行加工处理后使用

基本使用

1. 在stroe/index.js文件进行以下配置

   // 引入vue
   import Vue from 'vue'
   // 引入Vuex
   import Vuex from 'vuex'
   // 使用Vuex
   Vue.use(Vuex)
   
   // 创建并且导出store
   export default new Vuex.Store({
       // 用于保存公共数据
       state: {
           num: 0
       },
       // 用于进行处理异步操作、发送ajax请求、处理业务逻辑等操作
       actions: {
           // context中包含了commit等方法，方便在actions中进行异步处理后将数据commit给mutations进行数据更新
           hronous(context, value) {
               // 进行异步操作
               ...
               // 将进行异步处理或经过业务逻辑处理后的value，通过commit提交Mutations进行数据更新
               context.commit('HRONOUS', value)
           }
       },
       // 用于更新state中的变量值
       mutations: {
           // 更新state中的数据num
           // 为了与Actions中的函数进行区分，mutations中的函数以全大写形式命名
       	HRONOUS(state, value) {
               state.num = value
           }
   	},
       // 类似于computed计算属性
       getter: {
           bigNum(state) {
               return state.num * 10
           }
       }
   })
   

2. 在组件中使用getter：this.$store.getter.属性
3. 在组件中读取Vuex中的数据：this.$store.state.属性
4. 在组件中修改Vuex中的数据：
   1. 当需要进行异步操作或逻辑处理时：this.$store.dispatch(‘actions中的方法名’, 数据)
   2. 当不需要进行异步操作或逻辑处理时：this.$store.commit(‘mutations中的方法名’, 数据)
5. 当修改Vuex中的数据不需要进行异步操作或逻辑处理时可以跳过Actions直接commit通过Mutations进行数据更新