zoukankan      html  css  js  c++  java
  • vuex模块开发

    vuex

    项目结构

    Vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

    1. 应用层级的状态应该集中到单个 store 对象中。
    2. 提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
    3. 异步逻辑都应该封装到 action 里面。

    只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。

    对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

    ├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cinema.js       # 电影模块
            └── tabbar.js   # 标题模块
    

    核心概念

    • state
    • module
    • action
    • getter
    • mutation
    state

    Vuex 使用单一状态树——用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 而存在。这也意味着,每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段,在调试的过程中也能轻易地取得整个当前应用状态的快照。

    module

    由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

    为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

    action

    Action 类似于 mutation,不同在于:
    Action 提交的是 mutation,而不是直接变更状态。
    Action 可以包含任意异步操作。

    getter

    Vuex 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

    Getter 接受 state 作为其第一个参数:

    mutation

    更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数:

    store/index

    import Vue from "vue";
    import Vuex from "vuex"
    Vue.use(Vuex)
    import cinema from "./module/cinema"  //导入cinema模块
    import tabbar from "./module/tabbar"
    const store =new Vuex.Store({
       modules:{
        cinema,
        tabbar
       } 
    })
    export default store
    

    main.js

    // 引入vuex
    import store from "./store/index.js"
    new Vue({
      store,  // 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
      render: h => h(App),
    }).$mount('#app')
    

    电影模块 cinema.js

    import {instance} from "@/utils/http"
    const cinema ={
        namespaced: true,
        state: {
            cinemaList:[]  
        },
        actions: {
            //获取到接口数据
            getcinemaList(context){
                instance.get("/gateway?cityId=310100&ticketFlag=1&k=7247863",{
                    headers:{
                'X-Host': 'mall.film-ticket.cinema.list'
                    }
                    }).then((res)=>{
                        // this.cinemaList=res.data.data.cinemas;
                        console.log(res.data.data)
                     context.commit("setcinemaList",res.data.data.cinemas)
                }) 
            } 
        },
        
        getters: {
            //当依赖值改变时,会重新进行计算
            getCinemaListFive(state) {
                return state.cinemaList.slice(0, 5);
              }
        },
        mutations: {
            //第一个参数为state,当数据改变时。缓存在state中
            setcinemaList(state,data){
                state.cinemaList=data
            },
            someMutation (state) {
                api.callAsyncMethod(() => {
                  state.count++
        })
      }
        }
    }
    export default cinema
    

    在单页中调用vuex中的数据或方法

    辅助函数

    • mapState

    • mapGetters

    • mapActions

    • mapMutations

    // 引入vuex中的mapState,mapGetters
    import {mapState,mapGetters,mapActions,mapMutations} from "vuex"
    computed:{
          // 获取state中的cinemaList数据:
       ...mapState("cinema",["cinemaList"]),
          // 用来获取vuex中getters
       ...mapGetters("cinema",["getCinemaListFive"]),
           // 用于调用actions中的方法
       ... mapActiones(("cinema",["getCinemaList"]),)
            // 用于调用mutations中的方法
       ... mapActiones(("cinema",[" someMutation"]),)
    }
    使用的时候就在获取的数据前加this例如:
        this.getCinemaList
        this.cinemaList
    
    请用今天的努力,让明天没有遗憾。
  • 相关阅读:
    Flask商城项目详解
    《剑指offer》题解(Python版本)
    小程序学习笔记
    Html5 语义化标签
    常用页面布局
    css 语法记录
    vue-router 配置
    axios 配置
    Mybatis Generator
    openssl_pkcs7_verify的问题之旅
  • 原文地址:https://www.cnblogs.com/cupid10/p/13559484.html
Copyright © 2011-2022 走看看