vuex的使用

1.vuex的介绍

      vuex是vue配套的公共数据管理工具，我们可以将共享的数据保存到vuex中，方便整个程序中的任何组件都可以获取和修改vuex中的公共数据。

2.安装

npm install vuex --save；

3.引入文件

    （1）首先在项目中创建store文件夹，在文件中创建index.js文件。在index.js中加入这几行代码。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

     （2）在main.js全局引用。

//vuex
import store from './store'

     （3）实例化vue对象时加入store

new Vue({
  el: '#app',
  store,
  router,
  components: { App },
  template: '<App/>'
})

4.使用

vuex教程可参考：https://www.php.cn/js-tutorial-394689.html

建议通过mapState的数组来赋值，这种写法最方便。

index.js:

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

let dafaultCity = '上海'
dafaultCity = localStorage.city
const state = {
  city: dafaultCity
}
const mutations = {
  changeCity(state,name){
    state.city = name
    localStorage.city = name
  }
}

Vue.use(Vuex)

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

header.vue:

<template>
  <div class="header">
    <div class="header-right">
      <router-link to="/city">
        {{ city }}
        <span class="iconfont">&#xe688;</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
    export default {
        name: "Header",
        computed:{
          ...mapState(['city'])
        }
    }
</script>

list.vue:

<template>
  <div ref="container" class="container">
    <div>
      <div class="hot">
        <div class="hot-title">热门城市</div>
        <ul class="hot-list">
          <li class="hot-item" v-for="item in hotList" @click="changeName(item.name)"> {{ item.name }}</li>
        </ul>
      </div>
      <div class="Sort">
        <div class="Sort-title">字母排序</div>
        <ul class="Sort-list">
          <li class="Sort-item" v-for="(val,key) in cityList" @click="sortClick(key)"> {{ key }}</li>
        </ul>
      </div>
      <div class="list">
        <div v-for='(val,key) in cityList'
             :ref='key'>
          <div class="list-title">{{ key }}</div>
          <ul class="list-msg">
            <li class="list-item" v-for="item in val":key="item.id" @click="changeName(item.name)">{{ item.name }}</li>
          </ul>
        </div>
      </div>
    </div>

  </div>

</template>

<script>
import { mapMutations } from 'vuex'
import BScroll from 'better-scroll'
export default {
  props:["hotList","cityList"],
  name: "List",
  data(){
    return{
      scroll:''
    }
  },
  mounted() {
    setTimeout(() => {
      let container = this.$refs['container']
      // console.log(BScroll)
      this.scroll = new BScroll(container)
    }, 200)
  },
  methods:{
    sortClick(key){
      let data = this.$refs[key][0]
      this.scroll.scrollToElement(data)
      // console.log(this.$refs[key][0])
    },
    changeName(name){
      this.changeCity(name)
      this.$router.push('/')
    },
    ...mapMutations(['changeCity'])
  }
}
</script>

 

本文地址：https://blog.csdn.net/FormAda/article/details/112843636