关于vuex的一点小理解

集中起来的意志可以击穿顽石

真正的大师永远都怀着一颗学徒的心

什么是vuex

vuex 是一个专门为 vue.js 应用程序开发的状态管理模式, 把所有的状态都集中起来管理, 可以让异步数据不重复请求. 想要改变状态那就得按照vuex的规则来, 但是我们不会把所有的状态全部放在vuex中来管理, 只在vuex中放各个部门需要共享的状态.

vuex的使用

1.首先我们需要安装vuex

# 安装vuex
npm install vuex --save

2.在项目的src目录下创建store文件夹,在此文件夹下面创建index.js文件,代码示例:

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {

  }
})

3.在main.js文件中引入,代码示例:

import store from './store'

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

state

state是用来存储整个应用的状态数据,在根节点引入store后,就可以使用this.$store.state直接获取状态, 也可以利用vuex提供的mapState函数将state映射到计算属性中去,例如

import {mapState} from 'vuex'
 
handleClick(item){
  this.setCityName(item.name)
  this.setCityId(item.cityId)
},

...mapState("city",["setCityName","setCityId"])

mutation

更改vuex的store中的状态的方法就是提交mutation, mutation类似于一个事件每一个都有一个字符串的事件类型和一个回调函数,这个回调函数就是我们进行状态修改的地方,会接收state作为参数

mutations:{
    show(state){
      state.isTabbarShow = true
    },
    hide(state){
      state.isTabbarShow = false
    },
  }

action

action和mutation类似,但是action提交的是mutation,而不是直接修改状态,可以包含任意异步操作

//异步请求数据示例
actions:{
    getCinemaAction(store,id){
      http.request({
        url:`/gateway?cityId=${id}&ticketFlag=1&k=6798623`,
        headers:{
          'X-Host': 'mall.film-ticket.cinema.list'
        }
      }).then(res=>{
        store.commit("setCinemaList",res.data.data.cinemas) 
      })
     }
  }

module

当所有状态都放置在一起的时候,会把所有的状态集中在一个比较大的对象中,不好维护,我们可以用module将store分成多个模块,这样每个模块都拥有自己的state,mutation,action

import cinema from './module/cinemaModule'
import tabbar from './module/tabbarshowModule'
import city from './module/cityModule'

modules:{
    cinema,
    tabbar,
    city
  }

参考文档

https://vuex.vuejs.org/zh/guide/