宜宾网站建设公司

详解如何更好的使用modulevuex-创新互联

一、 前言

创新互联专业为企业提供绍兴网站建设、绍兴做网站、绍兴网站设计、绍兴网站制作等企业网站建设、网页设计与制作、绍兴企业网站模板建站服务，10多年绍兴做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

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

Demo连接： https://github.com/cookie-zhang/vuex_Demo

详解如何更好的使用module vuex

通信之间还是比较麻烦的，所以诞生了vuex。

二、 啥是vuex？

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

三、 什么时候最适合使用vuex？

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

四、 由图讲原理

详解如何更好的使用module vuex

四大核心模块：

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

五、上Demo

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

目录结构：

详解如何更好的使用module vuex

页面展示

详解如何更好的使用module vuex

详解如何更好的使用module vuex

模块化数据

首先在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;

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。


本文名称：详解如何更好的使用modulevuex-创新互联
浏览地址：http://ybzwz.com/article/dedggs.html

其他资讯