【vue】通过Vuex传递数据

Vuex是什么？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

如图所示：

Vue Components可通过State来获取公共数据

如果需要修改数据的话，需要经过:  Actions以及Mutations来进行修改

下面我们使用实例测试一下:

首先我们安装Vuex

npm install vuex --save

然后在src目录下创建store目录，建立一个index.js文件，导入Vuex以及Vue

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
        }
    }
})

然后在main.js中引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import 'styles/reset.css'
import 'styles/border.css'
import 'styles/iconfont.css'
import fastclick from 'fastclick'
import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
//导入store
import store from './store'

Vue.config.productionTip = false
fastclick.attach(document.body)
Vue.use(VueAwesomeSwiper)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  //引入store(Vuex框架进行传值)
  store,
  components: { App },
  template: ''
})

当我们需要获取数据时，可以直接通过

{{this.$store.state.city}}

直接获取

当我们需要改变该数据时：

可以给其绑定一个事件，并传入新的值：

点击事件触发后直接通过dispatch触发index.js中actions中的changCity方法并将新值传递过去:

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

这样就能让两个页面之间进行数据传递了

数据传递完成了，接下来我们讲解一下以上应用到的页面跳转

这里我们使用了路由的编程式跳转

路由router已经在webpack创建项目时已经导入，这里就不需要导入，直接使用

this.$router.push("/")就可以跳转到相应的页面。