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