VUEX的使用

安装vuex

npm install vuex --save

创建vue的store文件

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

Vue.use(Vuex)

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

在main.js中添加

// ----------- 引入 -------------------//
import store from './store'
// ------------ 使用 ----------------------//
new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

在模板中使用

<div class="area">
    <div class="title border-topbottom">当前城市</div>
    <div class="button-list">
        <div class="button-wrapper">
            <div class="button">{{this.$store.state.city}}</div>
        </div>
    </div>
</div>

修改vuex中数据

添加点击事件

<div class="area">
    <div class="title border-topbottom">热门城市</div>
    <div class="button-list">
    <div
        class="button-wrapper"
        v-for="item of hot"
        :key="item.id"
        @click="handleCityClick(item.name)"
    >
        <div class="button">{{item.name}}</div>
    </div>
    </div>
</div>

通过dispatch发送action和数据

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

在store中创建action和mutations

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

当点击事件出发的时候，可以dispatch将数据提交到actions中，actions通过commit发送到mutations修改state中的数据

简化写法

可以在点击事件出发的时候直接使用commit方法直接提交到mutations中修改state中的数据

组件中的点击事件

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

store中的方法

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

Vuex的高级使用

1. 使用html5中的localStorage存储state数据

let defaultCity = '上海'
// 添加try防止用户本地缓冲异常或者隐身模式，导致异常
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}
export default new Vuex.Store({
  state: {
    city: defaultCity
  },
  mutations: {
    changeCity (state, city) {
      state.city = city
      try {
        localStorage.city = city
      } catch (e) {}
    }
  }
})

2. 拆分store

针对原来的store的文件我们将其拆分为三部分

第一本分 state.js

let defaultCity = '上海'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
  city: defaultCity
}

第二部分 mutations.js

export default {
  changeCity (state, city) {
    state.city = city
    try {
      localStorage.city = city
    } catch (e) {}
  }
}

第三部分 store.js部分

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations
})

3. 使用mapState和mapMutations

第一种：

// 先引入mapState
import { mapState } from 'vuex'
// 将state中的city给组件的date中
export default {
  name: 'Header',
  computed: {
    ...mapState(['city'])
  }
}
// 使用
<div class="header-right">
    {{this.city}}
    <span class="iconfont arrow-icon">&#xe64a;</span>
</div>

第二种：

// 引入mapSate和mapMutations
import { mapState, mapMutations } from 'vuex'
// 使用...mapMutations(['changeCity'])将city数据commit到Mutations中
export default {
  name: 'CityList',
  computed: {
    ...mapState({
      currentCity: 'city'
    })
  },
  methods: {
    handleCityClick (city) {
      this.changeCity(city)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  }
  // ...
}

VUEX官方文档

https://vuex.vuejs.org/zh/installation.html

Vue中Vuex的使用