如何更好的使用module vuex？

1、 前言

在项目如何使用vuex呢？之前我都是非模块化去写的，可能你们和我同样也是这么去写，可是回过头去看看vue的文档，发现模块化去使用vuex更好，vue是单页面应用，其实只有一个页面，那么首页也好列表页也好，那都至关于这一个页面的一个模块，也能够把它理解为是一个一个的组件，毕竟组件化、组件抽离、组件封装是比较火的，因此在使用vuex的模块化的时候就能更好的去管理对应的模块，对于数据分离和定位都很是的好。废话有点多，先丢张图。

Demo链接：github.com/cookie-zhan…

通讯之间仍是比较麻烦的，因此诞生了vuex。

2、 啥是vuex？

有人说是一个插件、有人说是一个仓库。官方说的就比较好理解，Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。其实它就是对vue作数据管理的，更好的存储数据、响应数据。

3、 何时最适合使用vuex？

引用官方语言：Vuex 能够帮助咱们管理共享状态，并附带了更多的概念和框架。这须要对短时间和长期效益进行权衡。若是您不打算开发大型单页应用，使用 Vuex 多是繁琐冗余的。确实是如此——若是您的应用够简单，您最好不要使用 Vuex。一个简单的store模式就足够您所需了，可是，若是您须要构建一个大型单页应用，您极可能会考虑如何更好的在组件外部管理状态，Vuex将会成为天然选择。

4、 由图讲原理

   四大核心模块：

1. state: 翻译：状态，state实际上是数据状态管理对象，在这里你能够初始化一些你想要的数据。
2. getter: 翻译： 得到者，getter是对state的数据对象的读取，getters从表面是得到的意思，能够把他看做在获取数据以前进行的一种再编辑,至关于对数据的一个过滤和加工。getters就像计算属性同样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被从新计算
3. Actions：翻译：行动，Actions里面咱们能够定义咱们想执行异步的方法，在这里它并不会当即去执行，而是在页面中去dispatch这个方法，提交mutations，而不是直接去改变状态，在页面中有两种方式去作派发，第一种  this.$store.dispatch('xxx') 第二种 可使用mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（Demo中有体现）
4. mutations：翻译： 突变，mutations里面可写不少的改变状态的方法，也就是像翻译同样，能够改变state里面的数据，试讲state的里面数据发生改变的惟一方式。

5、上Demo

初始化项目就不讲了，根据文档一步一步生成就能够了

• 目录结构：

页面展现

模块化数据

    首先在store里面建立modudel文件夹，分别建立homeDataStore.js和listDataStore.js,这两个模块就是分别存储对应页面的数据，以上页面展现能够看到我只在list页面写了数据，因此咱们就把list页面做为例子来说。

listDataStore.js代码展现

import axios from 'axios'
const listData = {
    namespaced:true,//注意 模块化管理数据请不要忘了命名空间的开启
    state:{
       List:[],
       count: 0,
       compoentData:[],
       number: 0

    },
    actions:{
        getListData(context){
            new Promise((resolve,reject)=>{
                axios.get('../../../static/listData.json').then((res)=>{
                    context.commit('ListData',{'listDatas': res.data.listData})
                })
            })
        },
        handleAdd(context){
            context.commit("handleAddState")
        }
    
    },
    mutations:{
        ListData(state, paylod){
            state.List = paylod.listDatas
        },
        handleAddState(state){
            state.number++;
        }
    },
    getters: {
        List: state => state.List,
        count: state => state.count,
        number: state => state.number
    }
}
export default listData;
复制代码

数据格式是同样的，每一个页面都是这四大核心模块组成

store文件夹下面的index.js文件展现

//这个是总的store，抛出各个模块的store
import Vue from 'vue'
import Vuex from 'vuex'
import homeData from './moudel/homeDataStore'
import listData from './moudel/listDataStore'
Vue.use(Vuex)
const store = new Vuex.Store({    
modules:{ 
       homeData,
        listData,
    }})export default store;复制代码

在这里引入各个模块的数据。

main.js文件展现

import Vue from 'vue'
import App from './App'
import router from './router'
import store from  './store/index'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({ 
 el: '#app',  
router,  
store,  
render: h => h(App)
})
复制代码

引入store，将store注册到vue的实例上面，这样对应模块的数据基本格式是这样，接下来在看看页面中怎么调用的吧。

页面使用store数据  列表页展现

<template>
 <div> 
<router-link to='/'> 首页home</router-link><br/>
这是列表页list<br/>
<ul> 
<li v-for="item in List" v-bind:key="item.id">{{item.item}}</li> 
</ul>       
 <div>计算：</div>
        <div>{{number}}</div>
        <button @click='handleAdd()'>add</button> 
   </div></template><script>
import { mapGetters, mapActions } from 'vuex'
export default {    
name: 'list',
data(){        
return{}    
},    
computed:{        
    ...mapGetters('listData',['List','number'])    
},    
methods:{        
  //方法一：  ...mapActions('listData',['getListData','handleAdd']),       
   //方法二：       
   ...mapActions({            
     getListData:"listData/getListData",            
     handleAdd:"listData/handleAdd"        
})    
},    
mounted(){        
   this.getListData();    
}}
</script>
<style></style>复制代码

引入import { mapGetters, mapActions } from 'vuex' 辅助函数，在computed计算属性里面把对应页面的数据也就是列表页对应的列表页的store拿到List number，也能够认为是读取里面的数据，将数据映射到页面来，这样就拿到了响应的数据，methods里面是映射到页面的方法，好比getListData方法就是走接口请求过来的数据，当页面加载完后调用，也就是在mounted。handleAdd方法也是派发，在对应的actions里面能够看到。若是不用辅助函数，也就会用到dispatch，这里没在细讲

demo地址：github.com/cookie-zhan…

六 总结

以上描述简单易懂，能够在项目中直接使用这种模块化管理数据的方式，整体来看就更好的理解vux的流程图，单向数据流连通起来就能够造成一个完美的闭环。 没有太多文采，只想用最近单易懂的语言描述本身的理解，若是能帮到你那么一丢丢，请给我一个小小的赞⊙_⊙！