Vue Vuex 2.0（Day42）

VueX工作原理图

组成

• store：仓库，负责管理Actions、Mutations和State，为他们提供需要调用的API
• Actions（对象）：
• Mutations（对象）：
• State（对象）：状态

流程

1. 在组件中调用名为dispatch的API，传入两个参数，第一个参数为字符串类型的动作参数（行为），第二个参数是动作操作的数据

2. dispatch方法将参数传到Actions内，Actions内有与第一个参数同名的一个key，其value对应一个function方法，引起该函数的调用

   • 当组件中传入第二个参数时，组件可直接调用commit方法，不进入actions
   • 当组件中未传入第二个参数时，需通过Ajax请求获取时，actions会向后端API发送请求，通过该请求拿到第二个参数

3. 函数触发调用后，内部方法自行调用commit方法，将dispatch方法中传入的两个参数传入Mutations中

4. Mutations中同样有与第一个参数同名的一个key，其value对应一个function方法，该方法中会获取state和传入的第二个参数，在该函数中会依据传入的参数对数据进行相应操作，操作后引起state中数据的更新

5. 数据更新后，组件重新渲染至页面

搭建Vuex环境

前言

• Vue2中对应Vuex3的版本
• Vue3中对应Vuex4的版本

步骤

1. 安装Vuex

   npm i vuex@3
   

2. 在src文件夹中创建store文件夹，在其中创建index.js文件

3. 配置index.js相应内容

   //该文件用于创建Vuex中的核心store
   // 准备actions，用于响应组件中的动作
   const actions={}
   // 准备mutations，用于操作数据（state）
   const mutations={}
   //准备state，用于存储数据
   const state={}
   // 创建并暴露（导出）store
   export default new Vuex.Store({
       actions,
       mutations,
       state
   })
   

4. 文件引入

   main.js

   import Vue from 'vue'
   import App from './App.vue'
   // 引入store
   import store from "@/store";
   Vue.config.productionTip = false
   new Vue({
       render: h => h(App),
       store,
       beforeCreate() {
           Vue.prototype.$bus=this
       }
   }).$mount('#app')
   

   index.js

   // 引入Vue
   import Vue from 'vue'
   // 引入Vuex
   import Vuex from "vuex";
   //使用Vuex
   Vue.use(Vuex)
   

   注

   若在main.js中同时引入、使用Vuex和store，则会报错，需在index.js中引入并使用Vuex