vue 中的vuex数据框架使用

vue 只能承担视图层的主要类容

vuex 数据框架  大量数据  

1.安装

npm install vuex --save

1.1在main.js中引入：import store from './store/store'

1.2注册使用store

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

2.创建store.js  内容如下：

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

Vue.use(Vuex)

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

3.在.vue视图页面使用‘北京’：{{this.$store.state.city}}

4.在.vue页面中事件触发并传参city

 methods: {
    handlecityclick: function (city) {
      this.$store.dispatch('changecity', city)
    }
  }

5.在.js页面感知到changecity事件的触发，然后去调用change事情，在事件中对city做改变

export default new Vuex.Store({
  state: {
    city: '北京'
  },
  actions: {
    changecity: function (ci, city) {
      ci.commit('change', city)
    }
  },
  mutations: {
    change: function (state, city) {
      state.city = city
    }
  }
})

5.1可以省略掉actions对象中的事件，直接进入mutations去改变

.vue

 methods: {
    handlecityclick: function (city) {
      this.$store.commit('changecity', city)
    }
  }

.js 

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