vuex

vuex是vue中的状态管理管理模式

image.png

公共的变量存放在state中，批量异步数据发生改变通过dispatch触发相应的action,然后通过commit触发mutations进而数据变化；也可以通过mutations进行同步操作触发数据变化。
store文件夹下的index.js文件

第一种情况

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

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        city:'北京'
    },
    actions:{
        changeCity(ctx,city){
            ctx.commit('changeCity',city)
        }
    },
    mutations:{
        changeCity(state,city){
            state.city=city
        }
    }
})

触发数据变化的页面

<div class="button-wrapper" v-for="item of hot" :key="item.id" @click="handleCityClick(item.name)">
    <div class="button">{{item.name}}</div>
</div>
methods:{
  handleCityClick(city){
    this.$store.dispatch('changeCity',city)
  } 
}//通过dispatch触发action中的changeCity,同时将city传入，触发commit方法，将变化数据city修改到state中

第二种情况

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

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        city:'北京'
    },
    mutations:{
        changeCity(state,city){
            state.city=city
        }
    }
})

触发数据变化的过程

methods:{
  handleCityClick(city){
    this.$store.commit('changeCity',city)
  }
},