使用Vuex的目的就是帮助我们管理多个组件的状态。也就是实现数据共享,实时改变和缓存数据。
1.安装vuex:在命令行中cd进入创建好的vue项目。下然后运行:npm i vuex。
2.如何引入Vuex? 在你Vue项目中的main.js处直接导入 import Vuex form 'vuex'. 然后在下面输入:vue.use(vuex)。
3.如何创建一个vuex:
直接写 const store = new Vuex.Store({
state:{
count:0,
}
})
然后在new vue下面引入 store。即:
new Vue({
store, // 这里写store即可!!看这里!!其他别管!!
render: h => h(App),
}).$mount('#app')
4.如何使用Vuex:我们已经在入口处创建了vuex,那么如何在其他页面使用? 很简单,只需要在你所使用的页面创建一个计算属性即可,代码如下:
computed: {
count:function(){
return this.$store.state.count;
}
}
创建好这个计算属性后我们可以随意的使用代码如下:
<template>
<span>{{count}}</span>
</template>
保存打开页面你会看到0在页面上。如果完成了这一步你已经成功的使用了Vuex。
5.接下来我们vuex的第二个属性,mutations。这个代码在main.js中。它可以改变我们创建的state里面count的值。你明白mutations就是用来改变count的值就行了。
const store = new Vuex.Store({
state: {
count:0,
},
mutations: {
increment(state){
state.count++
}
}
}
上面的代码就是在原有基础中加了两行,有一个increment函数,这个是什么不要管,你知道它存在就行,然后里面传入了一个state。又做了一个 state.count++ 运算,意思就是让count ++
在模板中我们需要加入一个button按钮。
<template>
<span>{{count}}</span>
<button @click="$store.commit('increment')">count++</button>
</template>
这个代码也就是上面代码新加了一行! 一个点击事件,$store获取到我们创建的Store。然后一个commit方法传入我们刚才mutations定义的'increment',你别问什么意思,照着写,使用mutations一定用commit方法然后里面传入一个'increment'就行。
保存打开你的vue页面点击按钮应该会执行加一的操作。到了这一步Vuex已经会一半了!
下面还有一个actions getters方法,也特别简单,有同学想看的话留言马上更新。