初识Vuex

今天简单学习了一下Vux的知识，自己简单纪录下用法，方便复习和查看。大佬们看到就不要吐槽了。

Vuex：https://vuex.vuejs.org/zh/installation.html

1.安装：

npm install vuex --save

2.新增一个index.js 专门存放Vuex需要共享的数据操作

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

Vue.use(Vuex)

//Vuex共享数据

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

同时在main.js中引入

//引入Vuex
import store from './store/index.js'

//并且在实例中写入store

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

3.完成上面的操作之后，默认的数据就可以展示在界面了，store已经定义过了，所以可以在每个子组件获取到。

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

4.接下来就是动态修改值了

methods:{
//	vuex共享数据 commit调用store/index.js中的changeCity
	handleCityClick(city){
		this.$store.commit('changeCity',city)
	}
},

在index.js中将传入的值重新赋值即可

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