Vuex之三连环

 

目录

步骤一:下载vuex

步骤二:创建store文件夹

初识vuex:

深入vuex:

配置小仓库内容:

使用三连环:

 dispatch:

mutations:

getters:

完整代码如下:


本文对我禹哥讲解的vuex进行详细梳理与尚品汇项目中频繁使用的vuex三连环进行总结

下面对使用步骤进行说明:

Vuex之三连环_第1张图片

OK熟悉的人应该知道上图这是禹哥讲的使用vuex的流程

步骤一:下载vuex

npm i [email protected]

步骤二:创建store文件夹

在src目录下创建一个store文件夹,再在store文件夹下面创建一个index.js文件。好的到了这里需要注意一点就是你如果在main.js中使用vuex的话会包下面这个错误:

Vuex之三连环_第2张图片

 它的意思是你必须在创建store之前调用Vue.use(Vuex)这个方法。所以放在main.js中不好控制,所以直接间Vue.use(Vuex);放在store下的index.vue中使用就可以解决

在index中建立仓库:

初识vuex:


import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);
// state:仓库,存储数据的地方

const state = {
  //state中的初始值别瞎写,需要根据接口的返回值来写
 
};
//  mutation:修改数据的地方(唯一手段)
const mutations = {

};
// actions:操作数据的地方,使用dispatch方法分发数据,可以书写自己的业务逻辑,可以处理异步
const actions = {
 
};
//getters:可以理解为计算属性,用于简化仓库数据,让组件获取数据更加便捷
const getters = {};

//创建store实例
const store =new Vuex.Store({
    actions,
    mutations,
    state,
    getters,
})

export default store

之后再讲store下的index导出到main.js中,也就是在main.js中引用

import store from '@/store'

挂载在vue实例对象上:

Vuex之三连环_第3张图片

深入vuex:

示例图如下:

Vuex之三连环_第4张图片

 上图中store下的index.js是大仓库,里面汇总了detail、home、search三个小仓库

配置小仓库内容:

其实是和前面的没有什么区别,只不过写完之后你要导出去,不然大仓库如何使用呢,配置如下图,需要注意 的是我这里开了命名空间,是否需要开命名空间看自己的需求,小项目可以不用开,如果你开了命名空间那么你在使用dispatch时会有一点区别。后面讲

Vuex之三连环_第5张图片

 然后三个小仓库就是按照这样先配置好,最后在将他们导入到大仓库中去汇总。

import Vue from "vue";
import Vuex from "vuex";

import home from "./home";//导入三个小仓库
import search from './search'
import detail from './detail'
Vue.use(Vuex);//在vue中使用vuex
export default new Vuex.Store({//导出大仓库
 
    modules:{//在这里将小仓库汇总
        home:home,
        search:search,
        detail,//使用简写形式
    }
});

使用三连环:

流程图:

Vuex之三连环_第6张图片

 dispatch:

在实例中首先使用store中的dispatch,dispatch是分发的意思是store身上的一个API,它包含开两个参数,第一个是动作也可以说是一个操作,你通过这个操作调用actions里面的一个函数。第二个就是你要传递的参数。但是在实例中使用的时候就要说到刚刚上面说到的注意事项了,因为我这里使用了命名空间,所以在dispatch时就需要加上具体的哪个小仓库名字,如果你没有开启命名空间就可以不用加。

Vuex之三连环_第7张图片

 如果没开,命名空间就是  this.$store.dispatch('getGoodInfo',this.$route.params.skuid)

 actions:

你使用了dispatch,那么你的actions中必须要有一个getGoodInfo方法来与之对应。其中第一个{commit} 是对commit的解构commit也是一个函数,有两个操作,第一个也是一个动作,第二个就是参数,通过commit将这次请求交给mutations

async getGoodInfo({commit},skuId){
        let result =await reqGoodsInfo(skuId)
        if(result.code==200){
            commit('GetGOODINFO',result.data)
        }
    }

mutations:

修改处理数据的唯一地方  

在mutations中真正的处理数据并且渲染数据

const mutations={
    GetGOODINFO(state,goodInfo){
        state.goodInfo=goodInfo
    } 
}

getters:

就是相当于计算属性,对state中的数据进行简化操作,就比如当你的数据很复杂时你需要简单的拿到数据。举个例子你的数据是:AAA.BBB.CCC.DDD.data,那么你就可以使用计算属性将其变为data.

这样你简化的数据就是在getter里的skuInfo了 。使用getter里面的数据。你只需要在实例中引入

import { mapGetters } from 'vuex'

然后直接在计算属性中使用就好啦

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

这样你就可以直接使用categoryView这个变量了,当然需要注意的是这里使用了命名空间,所以要具体说明是在哪个小仓库中的数据。mapState同理

完整代码如下:

import { reqGoodsInfo } from "@/api"

const state={
    goodInfo:{}
}

const mutations={
    GetGOODINFO(state,goodInfo){
        state.goodInfo=goodInfo
    } 
}

const actions={
    //获取产品信息
   async getGoodInfo({commit},skuId){
        let result =await reqGoodsInfo(skuId)
        if(result.code==200){
            commit('GetGOODINFO',result.data)
        }
    }
}

const getters={
   
    //简化产品信息的数据
    skuInfo(state){
        return state.goodInfo.skuInfo||{}
    },
    //产品售卖属性 的简化
    spuSaleAttrList(state){
        return state.goodInfo.spuSaleAttrList||[]
    }
}

export default{
    namespaced:true,
    state,
    actions,
    mutations,
    getters
}

OK今天就分享到这,如果对你有帮助欢迎点赞收藏评论一波~~~

你可能感兴趣的:(vue学习之路,前端,javascript,Vuex,vue.js)