vuex共享数据的应用(2)

vuex共享数据的应用(2)

上一期已经将vuex的基本使用讲完，这期是对上一期的补充说明

首先是vuex处理同步任务的工作流程

vuex在处理同步任务的时候，可以直接在mutation中进行state的更改。
也可以走action再提交给mutation，这是官方的标准流程

vuex处理异步任务的工作流程

vuex在处理异步任务的流程，是必须要走actions来提交给mutations然后才能对state进行更改

1.补充mapState的使用

<Tabbar v-show="$store.state.isTabbarShow"></Tabbar>

上期的代码，虽然实现了功能，但代码较为繁琐，但是vue也为我们提供了mapState辅助函数

1.先引入

import {mapState} from "vuex"

2.然后在计算属性中使用

computed:mapState(["isTabbarShow"])

但是这样写了之后，又没有办法与其他局部计算属性混合使用，不过我们可以采取以下写法来进行兼容

  computed:{
    ...mapState(["isTabbarShow"]), //这里使用了es6展开运算符
    newcomputed(){}
  },

2.补充getter的使用

其次我们在vue项目开发中，对于异步回调请求过来的数据，一般都是要进行各种删选，然后再将其渲染到页面上，那vuex中的异步回调数据如何进行过滤，vuex提供了getters，也可以认为getters就相当于是store的计算属性。

store/index.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    comingList:[]
  },
  getters:{
    //数据加工
    comingListGetter(state){
      return state.comingList.filter((item,index)=>index<3)
      //利用return将过滤后的数组进行返回
    }
  },
  mutations: {},
  actions: {},
  modules: {}
})

在组件list.vue中使用

<template>
  <div>
      <ul>
        <li v-for="item in $store.getters.comingListGetter" :key="item.filmId">
                {{item}}
        </li>
      </ul>
  </div>
</template>

当然也可以使用mapGetters辅助函数，使用方法与mapState类似

export default {
	computed:{
		...mapGetters(['comingListGetter'])
	}
}

3.补充mutations的常量风格

在给state命名时，容易出现命名重复的问题，工程化的开发，可以采用mutations常量风格开发，避免出现命名重复的问题。
mutations常量风格开发，其实就是讲mutations中函数名，储存在特定的文件中，然后从外部进行引入，从而在不同组件中，引入并使用，如果重名，也仅需修改特定文件中的常量名，快速解决重名问题。

实例如下:

src/handleStore/index.js

//在此文件夹下设置常量
export const HIDE_TABBAR_MUTATION = "hide"
export const SHOW_TABBAR_MUTATION = "show"

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import {HIDE_TABBAR_MUTATION,SHOW_TABBAR_MUTATION} from "@/handleStore"

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    isTabbarShow:true,
    comingList:[]
  },
  mutations: {
    //常量风格
    //es6写法将属性名改为变量
    [HIDE_TABBAR_MUTATION](state,data){
      state.isTabbarShow = data
    },
    [SHOW_TABBAR_MUTATION](state,data){
      state.isTabbarShow = data
    },
  },
  actions: {},
  modules: {}
})

在组件中使用 detail.vue

import {HIDE_TABBAR_MUTATION,SHOW_TABBAR_MUTATION} from "@/handleStore"
export default {
    beforeMount() {
        this.$store.commit(HIDE_TABBAR_MUTATION,false) 
    },
    beforeDestroy() {
        this.$store.commit(SHOW_TABBAR_MUTATION,true)
    },
}

4.补充modules模块化整合

当然mutations常量风格当然能解决命名重复的问题，但这不是最终极的解决方法，最优的解决方法当然是对store进行模块化开发，将代码分离出去。

实例如下：

store/index.js

import Vue from 'vue'
import vuex from "vuex"
//分离出两个单独的仓库，对其进行管理
import channel from "./channels"
import loginUser from "./loginUser"

Vue.use(vuex);
var store = new vuex.Store({
  //配置
  //用模块来整合
  modules:{
    channel,loginUser
  }
})

export default store;

store/channel/index.js

进行仓库的配置，这里使用了moudel来进行工程化处理
vuex的核心概念，数据的改动必须要提交一个mutations:{}
在vuex中，提交mutation是数据变化的唯一原因
在mutation中不能出现互作用操作
也不能使用副作用操作：
1.改动或使用外部的数据2.ajax，3.loacalstorge,或者其他副作用
然后使用dispatch来替换组件当中的commit

export default {
    namespaced:true,//开启命名空间
    state:{
        data:[],
        isloading:false,
    },
    mutations:{
        //配置多种变异方式
        //state原来的状态，
        //payload:负荷
        setisloading(state,payload){
            state.isloading = payload;
        },
        setData(state,payload){
            state.data = payload;
        },
        //如果要使用副作用操作，就要使用action
        // actions:{
        //     async fetchData(context){
        //         context.commit("setisloading",true);
        //         var channel = await getdata();
        //         context.commit("setData",true);
        //     }
        // }
    }
}

channel.vue

 <li>
   {{isloading}}
 </li>

import {mapState} from "vuex";

//利用计算属性获取共享数据
computed: mapState("channel",["data","isloading"]),
created(){
	//这里使用的是created，如果需要监控，请使用watch
	this.$store.commit("channel/setisloading",true)
	//更改仓库中的数据
}

关注微信公众号前端凌影，了解更多前端干货！