Vuex 可以帮助我们管理共享状态,各个页面或多个组建之间进行复杂数据之间的传值很困难时,我们可以这样想,我们可以把公共的数据放到一个公共的存储空间去存储,如果我们改变了这个公共空间的数据,其他页面或组件就能感知到,这就是vuex
如图,vuex虚线部分就是所说的公共空间的存储区域(可以把这个区域理解成一个仓库),这个仓库由几部分组成:state(所有的公共数据都存放在state中),如果一个组件想用公共数据,就可以直接调用state。如果想改变state中的公用数据,不能组件直接改变公用数据,必须组件先调用Action(通过dispatch方法调用),Action(通过commit方法调用)再接着调用Mutations,Mutations放着的是对state的修改。
1.安装vuex
npm i vuex --save
2.在src文件夹下创建一个store文件夹,在store文件中创建index.js文件
3.在index.js中
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export defaule new Vuex.Store({
state{
data:'存放的公共数据'
}
})
4.在main.js中 引入使用
import store from './store/index.js'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
5.在要使用公共数据的页面中 {{this.$store.state.data}} 可以使用数据
6.如需要改变数据:
在需要改变数据的组件中
绑定事件触发事件函数
<div @click="handelChangeCity(传入要改变成的数据)"> 改变数据</div>
<script>
export default{
methods:{
handelChangeCity(city){
this.$store.dispatch('changeCity',city)//派发一个名字叫changeCity的action,传递参数为city
}
}
}
</script>
在index.js中
export default new Vuex.Store({
state:{
data:'存放的公共数据'
},
actions:{
changeCity(ctx,city){
ctx.commit('changeCity',city) //执行commit方法调用mutations
}
},
mutations:{
changeCity(state,city){
state.city=city
}
}
})