今日学习分享，vuex状态管理

1、vuex状态管理，在项目中创建一个store文件夹，里面包含的js模块有
1.index.js存放vuex最核心的管理对象store
2.action.js存放 通过mutation间接更新state的多个方法对象 在这里要和后台进行异步交互
3.mutations.js 存放 直接更新state的多个方法对象
4.mutations-type.js 存放包含n个mutation的type名称常量
5.state.js 存放 定义要管理的状态对象，
6.getter.js 存放包含多个基于state的getter计算属性的对象
vuex使用步骤：
简化来说，
1.就是在组件中使用this.$store.dispatch(“getAddress”);调用actions里面写好的函数
2.actions里面放的就是异步请求接口函数并把结果通过commit(RECEIVE_ADDRESS,{address})提交给mutation，（RECEIVE_ADDRESS是mutations-type里面定义的常量名）
3.mutations里通过

	[RECEIVE_ADDRESS](state, {
    address //接收到action提交过来的address数据
  }) {
    state.address = address //给state管理的状态对象进行赋值
  },

去跟新state里面定义的状态
4.通过…mapState([“address”]),这个方法去读取state里获取的后台的数据后的状态，并渲染到页面
…mapState（[‘state里定义的状态名称’]） //获取state里的状态
…mapActions([‘actions里定义的方法名称’]) //获取actions里定义好的方法名
贴上完整代码吧
app.vue部分代码

 mounted() {
    this.getAddress()
  },
 methods:{
    // 触发action函数 方式二
    // 调用action里面的getAddress方法 异步获取地址
    ...mapActions(['getAddress'])//相当于有了一getAddress这样一个方法，然后在mounted里面去调用
  },

xxx.vue 某组件，读取state状态，并渲染

<HeaderTop :title="address.name"> //调用其他组件，并传参，参数是通过vuex管理以后 获取的后台的数据，

// 引入vuex里的mapState函数，去读取vuex里的状态
import { mapState } from "vuex";

  // 读vuex里面的状态
  computed: {
    ...mapState(["address"]),
  },

index.js

/*
    vuex最核心的管理对象store
*/ 
import Vue from "vue"
import Vuex from "vuex"
// 把四个js模块都引入进来
import state from "./state"
import mutations from './mutations'
import getters from './getters'
import actions from './actions'

// 插件的声明使用
Vue.use(Vuex)

// 创建仓库 并引入
export default new Vuex.Store({
    state,
    mutations,
    getters,
    actions
})

action.js

/*
    通过mutation间接更新state的多个方法对象

    在这里要和后台进行异步交互
*/
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from './mutation-types'

import {
  reqAddress,
  reqFoodCategorys,
  reqShops
} from '../api'
export default {
  // 异步获取地址
  async getAddress({
    commit,
    state
  }) {
    // 发送异步ajax请求
    // 获取state里面定义好的 经度和纬度
    const geohash = state.latitude + "," + state.longitude
    // 调用接口并把经纬度传给后台
    const result = await reqAddress(geohash)
    // 提交一个mutation
    // 看看接口文档 返回的数据格式是什么样的
    // 做一个判断 ，如果获取的数据的code（也就是result.code）等于 后台的code
    if (result.code === 0) {
        // 获取到后台返回的data数据
        const address =result.data
        //进行提交给mutation，并且把获取去的数据传递过去
        commit(RECEIVE_ADDRESS,{address})
    }
  },
  // 异步获取食品分类列表
  async getCategorys({
    commit,
  }) {
    const result = await reqFoodCategorys()
    // 提交一个mutation
    // 看看接口文档 返回的数据格式是什么样的
    // 做一个判断 ，如果获取的数据的code（也就是result.code）等于 后台的code
    if (result.code === 0) {
        // 获取到后台返回的data数据
        const categorys =result.data
        //进行提交给mutation，并且把获取去的数据传递过去
        commit(RECEIVE_CATEGORYS,{categorys})
    }
  },
  // 异步获取商家列表
  async getShops({
    commit,
    state
  }) {
    // 发送异步ajax请求
    // 获取state里面定义好的 经度和纬度
    const {longitude,latitude}= state
    // 调用接口并把经纬度传给后台
    const result = await reqShops(longitude,latitude)
    // 提交一个mutation
    // 看看接口文档 返回的数据格式是什么样的
    // 做一个判断 ，如果获取的数据的code（也就是result.code）等于 后台的code
    if (result.code === 0) {
        // 获取到后台返回的data数据
        const shops =result.data
        //进行提交给mutation，并且把获取去的数据传递过去
        commit(RECEIVE_SHOPS,{shops})
    }
  }
}

mutations.js

/*
    直接更新state的多个方法对象

    需要引入所有的mutation-type定义的常量
    action和mutations交互的时候，传的是包含数据的对象
*/
import {
  RECEIVE_ADDRESS,
  RECEIVE_CATEGORYS,
  RECEIVE_SHOPS
} from './mutation-types'
export default {
  [RECEIVE_ADDRESS](state, {
    address //接收到action提交过来的address数据
  }) {
    state.address = address //给state管理的状态对象进行赋值
  },
  [RECEIVE_CATEGORYS](state, {
    categorys //接收到action提交过来的categorys数据
  }) {
    state.categorys = categorys //给state管理的状态对象进行赋值
  },
  [RECEIVE_SHOPS](state, {
    shops //接收到action提交过来的shops数据
  }) {
    state.shops = shops //给state管理的状态对象进行赋值
  },
}

mutations-type.js

/*
    包含n个mutation的type名称常量
*/
export const RECEIVE_ADDRESS = 'receive_address' //接收地址
export const RECEIVE_CATEGORYS = 'receive_categorys' //接收食品分类数组
export const RECEIVE_SHOPS = 'receive_shops'//接收商家列表数组

state.js

/*
    定义要管理的状态对象，
    首先要知道，页面上需要管理的对象的状态，然后再做其他的事情
    比如首页，地址，商品列表，经度和纬度，


    从后台获取接收数据，进行赋值
*/
export default {
  latitude: 40.10038, // 纬度
  longitude: 116.36867, // 经度
  address: {}, // 地址信息相关对象
  categorys: [], // 食品分类数组
  shops: [], //商家列表 数组
}

学习笔记，如有不足的地方，请大家多多指教。