Vue2 - 关于 vuex 的运用

一般在项目中全局组件或大组件的数据，或者需要从服务器获取的数据都储存在 vuex 中

vuex 中的 action 主要用来发送请求，不在组件中发送了！

而且vuex需要模块化。

工作模式（三连环）： api 编写发送请求函数 -> vuex 调用请求函数并存储数据 -> 组件利用 vuex 发送请求获取数据

组件中使用 vuex

1、读取数据

import { mapState, mapGetters } from 'vuex'

computed: {
    ...mapState('home',['navList']),
    ...mapGetters('detail',['spuSaleAttrList','skuInfo','categoryView'])
},

监视 vuex 数据

watch: {
    navList(newValue) {
        .
    }
}

2、修改 vuex 数据

必须通过调用 dispatch 或者 commit

this.$store.commit('user/upDataCountdown');

调用 dispatch

this.$store.dispatch('home/updataNavList');

vuex工作模式

案例：home 组件中的 nav 组件展示时自动更新数组 navList

1、新建 src/store 文件夹 新建 index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

// 引入仓库
import home from './home'

//创建并暴露store
export default new Vuex.Store({
	modules: {
        home,
	}
})

2、nav组件：获取 vuex 中的 navList 和 申请更新 navList

import {mapState} from 'vuex'

export default {
    name: 'TypeNav',

    computed: {
        ...mapState('home',['navList']),
    },

    mounted() {
        // 更新 vuex/home 里的 navList
        this.$store.dispatch('home/updataNavList');
    },
}

3、配置 home.js

（一）在 actons 向服务器发送请求

• 调用请求函数（提前在 api 里面写好）获取到 promise 对象，
• 通过异步函数处理 promise 对象（使用 async/await 获取具体的值）

（二）通过 context.commit 近一步申请更新 NavList

（三）在 mutations 中直接更新

// home仓库

// 引入axios请求函数
import { reqgetCategoryList } from '@/api'

export default {
	namespaced: true,

    actions: {
        async updataNavList(context) {
            let result = await reqgetCategoryList();

            if(result.code == 200) {
                context.commit('updataNavList',result.data)
            }
        }
    },

    mutations: {
        updataNavList(state,value) {
            state.navList = value;
        }
    },

    state: {
        navList: {},
        goodData: {},
    },

    // 一般通过 getter 简化 state 中复杂对象的数据（
    getters: {
        categoryView(state) {
            return state.goodData.categoryView || {};
        },

        skuInfo(state) {
            return state.goodData.skuInfo || {};
        },       
    }

}