vuex的简单使用-设置变量-更新变量

2018-10-18  本文已影响0人  隐身的猫

1、安装vuex

npm install vuex –save

2、新建文件夹store及创建store.js文件

建在和main.js的同级下


store.js(设置了一个city变量和一个改变city的方法)

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

city: '上海'

},

mutations: {

changeCity (state, key) {

state.city = key

}

}

})

3、main.js引入

import store from './store/store'

new Vue({

  el: '#app',

  router,

  store,

  components: { App },

  template: '<App/>'

})

4、使用

页面直接使用变量

<span class="city2">{{$store.state.city}}</span>

页面调用方法改变变量

this.$store.commit('changeCity', '北京')

上一篇下一篇

猜你喜欢

热点阅读