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', '北京')