【前端VUE基础（七）】Vuex进行开发的一般流程

使用Vuex进行开发的一般流程如下：

一、安装和配置Vuex： 

在Vue项目中，通过npm安装Vuex。

 （一）使用npm安装Vuex：

npm install vuex --save

（二）main.js中引入Vue和Vuex：

        在主入口文件（通常是main.js）中引入和配置Vuex，在Vue实例化之前，将创建的Store通过Vue的全局API Vue.use() 进行注册。

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  store, // 注册Vuex Store
  render: (h) => h(App),
}).$mount('#app');

二、创建Vuex Store： 

创建一个新的.js文件用于定义和配置Vuex的核心组成部分 - Store。在Store中定义state、mutations、actions、getters等。

 （一）新建store文件夹

在项目中新建一个store文件夹，用于存放Vuex相关文件，如果存在则直接使用即可。

 （二）新建index.js文件

在store文件夹中创建一个新的.js文件（通常命名为index.js），用于定义和配置Vuex的Store，如果存在则直接使用即可。

// store/index.js

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

// 引入 getters 模块
import getters from './getters' 
// 引入 app 模块
import app from './modules/app'
// 引入 settings 模块
import settings from './modules/settings' 
// 引入 user 模块
import user from './modules/user' 

Vue.use(Vuex)

// 创建 Vuex store 实例
const store = new Vuex.Store({
modules: {
app,      // 注册 app 模块
settings, // 注册 settings 模块
user      // 注册 user 模块
},
getters   // 注册 getters 模块
})

export default store

 (三) 新建Vuex Store

创建一个新的Vuex Store，并定义state、mutations、actions和getters。

import { } from '@/api';
// state【仓库当中的商品】 
//       （提供唯一的公共数据源）数据状态
const state ={

}
// mutations【操作商品的工人】 函数，
//           同步操作(用于变更store中的数据)不能执行异步操作，延时器
const mutations= {

}
// actions【发送命令的老板】 
//        用于处理异步任务，必须通过context.commit()触发某个mutations方式间接的变更数据。
const actions={

}
//  getters【二次加工】 
//         (用于对store中的数据进行加工处理形成新的数据)（不会修改state中的数据）
const getters={

}

export default{
    state,
    actions,
    mutations,
    getters
}

 （1）定义State：State是存储应用程序状态的地方。在Store中定义state对象，并初始化需要共享的数据。

（2）定义Mutations：Mutations是用于更改State的方法。在Store中定义mutations对象，并编写对State进行修改的方法。

（3）定义Actions：Actions用于处理异步操作和业务逻辑，并提交Mutations来修改State。在Store中定义actions对象，并编写需要执行的操作。可以通过调用后端接口获取数据，并在成功后提交相应的Mutation。

（4）定义Getters：Getters用于从State中派生出一些新的状态值，类似于计算属性。在Store中定义getters对象，并编写需要派生的状态值的方法。

参考案例

//api/index.js
//当前模块，API进行统一管理，即对请求接口统一管理
import requests from "@/api/request";

// 获取用户地址 /api/user/userAddress/auth/findUserAddressList
export const reqAddressInfo = ()=>requests({url:'/user/userAddress/auth/findUserAddressList',method:'get'});

// 获取订单交易页信息 /api/order/auth/trade
export const reqOrderInfo = ()=>requests({url:'/order/auth/trade',method:'get'});

import { reqAddressInfo ,reqOrderInfo } from '@/api';
// state【仓库当中的商品】 （提供唯一的公共数据源）数据状态
const state = {
    address:[],
    orderInfo:{},

}
// mutations【操作商品的工人】 函数，同步操作(用于变更store中的数据)不能执行异步操作，延时器
const mutations = {
    GETUSERADDRESS(state,address){
        state.address=address;
    },
    GEtORDERINFO(state,orderInfo){
        state.orderInfo=orderInfo;
    }

}
// actions【发送命令的老板】 用于处理异步任务，必须通过context.commit()触发某个mutations方式间接的变更数据。
const actions = {

    // 获取用户地址信息
    async getUserAddress({ commit }) {

        let result = await reqAddressInfo();
        if (result.code == 200) {
            commit('GETUSERADDRESS',result.data);
        } 
    },
    // 获取订单交易页信息
    async getOrderInfo({commit}){
       let result = await reqOrderInfo();
       if (result.code == 200) {
         commit('GEtORDERINFO',result.data);
       }

    }

}
//  getters【二次加工】  (用于对store中的数据进行加工处理形成新的数据)（不会修改state中的数据）
const getters = {

}

export default {
    state,
    actions,
    mutations,
    getters
}

  三、在组件中使用Vuex

        在组件中使用 Vuex：在需要使用 Vuex 的组件中，通过 this.$store 访问 Vuex Store，并使用 computed 属性、methods 或 watch 来获取 state、派生状态、触发 actions 等：

<script>
import { mapState } from 'vuex';
export default {
  name: 'Trade',
  data() {
    //收集买家的留言信息
    return {
      msg: ''
    }

  },
  // 生命周期函数：挂载完毕
  mounted() {
    this.$store.dispatch('getUserAddress');
    this.$store.dispatch('getOrderInfo');
  },
  computed: {
    ...mapState({
      addressInfo: state => state.trade.address,
      orderInfo: state => state.trade.orderInfo,
    }),
    // 提交订单时最终选中的地址
    userDefaultAddress() {
      // find:查找数组中符合条件的元素返回，作为最终结果
      return this.addressInfo.find(item => item.isDefault == 1) || {};
    }
  },
  methods: {
    //修改默认地址
    changeDefault(address, addressInfo) {
      addressInfo.forEach(item => item.isDefault = 0)
      address.isDefault = 1;
    },
    // 提交订单
   async  submitOrder() {
      // 交易编码
      let { tradeNo } = this.orderInfo;
      let data = {
        "consignee": this.userDefaultAddress.consignee, //最终收件人姓名
        "consigneeTel": this.userDefaultAddress.phoneNum,//最终收件人手机号
        "deliveryAddress":this.userDefaultAddress.fullAddress,//最终收件人地址
        "paymentWay": "ONLINE",//支付方式
        "orderComment":this.msg,//买家留言
        "orderDetailList":this.orderInfo.detailArrayList,//商品清单
      };
      let result =  await this.$API.reqSubmitOrder(tradeNo,data);
      if(result.code == 200 ){
        this.orderId = result.data;
        // 路由跳转+路由传递参数
        this.$router.push('/pay?orderId='+this.orderId);
      }else{
        alert(result.message);
      }
    },
  }
}
</script>

首先，在组件文件中导入 mapState 辅助函数和 Vuex 的 store：

import { mapState } from 'vuex';
import store from './store'; // 假设 store 文件的路径为 './store'

         在组件的 computed 部分使用 mapState 将 Vuex 的状态映射到组件的计算属性上。mapState 函数接受一个对象参数，对象的键是计算属性的名称，值是一个函数或者是一个字符串，用于指定需要从 Vuex 状态中取值的属性。

computed: {
  ...mapState({
    addressInfo: state => state.trade.address,
    orderInfo: state => state.trade.orderInfo,
  }),
}

        上述代码中，将 Vuex 的 state.trade.address 映射为组件的 addressInfo 计算属性，将 state.trade.orderInfo 映射为组件的 orderInfo 计算属性。

        通过这样的映射，组件就可以像使用本地计算属性一样使用 Vuex 的状态，在模板中可以直接使用这些计算属性来访问 Vuex 中的数据。

 

 四、在模板中绑定数据

通过模板语法，在组件的模板中绑定和展示从Vuex中获取的数据。在 Vue 组件中，你可以使用双花括号或者指令来绑定数据到模板。以下是几种常见的绑定方式：

（一） 使用双花括号 {{ }} 进行插值绑定：

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

 上述代码中，message 是组件的 data 配置项中定义的一个属性，它将被渲染到 <p> 标签中。

（二） 使用 v-bind 指令进行属性绑定：

<template>
  <div>
    <img v-bind:src="imageUrl" alt="Image">
  </div>
</template>

在上述示例中，imageUrl 是组件的 data 配置项中定义的一个属性，使用 v-bind 指令将该属性的值绑定到 <img> 标签的 src 属性上。 

 （三）使用 v-model 指令进行双向数据绑定：

<template>
  <div>
    <input v-model="name" type="text">
    <p>Hello, {{ name }}!</p>
  </div>
</template>

上述代码中，name 是组件的 data 配置项中定义的一个属性，使用 v-model 指令将表单输入框和 name 属性进行双向绑定。当用户在输入框中输入内容时，name 属性会自动更新，并且变更后的值也会同步显示在 <p> 标签中。 

10、触发Actions或Mutations：通过组件中的用户交互或其他事件，触发Actions或Mutations来修改State。

11、监听State的变化：可以通过Vuex提供的API store.subscribe() 来监听State的变化，以便根据需要执行一些操作，例如保存到本地存储或发送通知。

以上是使用Vuex进行开发的一般流程。通过Vuex可以有效地管理应用程序的状态，实现数据的共享和统一管理。同时，Vuex还提供了一些辅助函数和工具，使得状态的修改和获取更加便捷。