vuex是用于组件之间管理数据的,我们可以把组件之间需要共享的数据用vuex进行管理,这样可以避免复杂的组件传值问题。
安装vuex
1.npm install vuex --save
2.引入vuex
import VueX from ‘vuex’
Vue.use(VueX)
3.创建store对象,state中存放全局共享数据
const store = new VueX.Store(
{ state:{data:12345}}
)
4.将store对象挂载到vue实例中
new Vue({ store})
使用全局数据
this.$store.state.数据名称
第二种使用方法
在组件中导入import {mapState} from ‘vuex’
computed:{
…mapState([‘数据名称’])
}
然后直接在数据写在页面即可{{数据名称}}
改变全局数据
vue不推荐直接在组件修改全局数据,
所以一般通过Mutation修改全局数据,
因为在项目发展较大的时候,不易发现是哪里修改了数据
在store对象定义muation
const store = new VueX.Store(
{ state:{cc:123},
mutations:{
函数名(state)
{ state.cc=234 } }})
在组件中使用
在methods中使用函数
function(){
this.$store.commit(‘函数名’)
}
带参数使用mutation
mutations:{
函数名(state,step)
}
第二种方式使用mutation
import {mapMutation} from ‘vuex’
在组件中methods中
methods:{
…mapMutation([‘函数名1’,‘函数名2’]),
组件调用函数名(){
this.函数名n()
}
}