Vuex是个啥?
想象一下,你正在搭建一座由很多小房间组成的房子,每个房间就像是Vue应用中的一个组件,它们各自有自己的小秘密(数据)。有时候,这些房间需要共享一些东西,比如谁家做的蛋糕(状态),这时候就需要一个中心仓库来放这些共用的东西,这就是Vuex。
为啥要用Vuex?
没有Vuex时,如果一个房间的蛋糕要给其他所有房间尝尝,你得挨个传递,麻烦又容易乱。用了Vuex,就像有了一个公共厨房,大家都知道去哪里找吃的,简单直接。
Vuex怎么用?
Vuex有四个主要角色,咱们一一过一遍:
1. State(状态):这是那个公共厨房里放着的大蛋糕,所有的数据都放在这里,大家都看得到。
2. Getters(获取器):想象成是从厨房拿食物的小手,它帮你从state里取数据,还能加工一下,比如切片蛋糕。
3. Mutations(突变):想要改变蛋糕的口味?得用Mutation。它是一系列规定好的方法,用来修改State里的数据,保证每次修改都是可控的。
4. Actions(动作):如果说Mutation是厨师,Action就是跑腿小哥。它负责触发Mutation,还可以执行异步操作,比如先去超市买材料再回来做蛋糕。
孩子们,操练起来:
第一步:安装Vuex
npm install vuex --save
或者
yarn add vuex
第二步:创建Vuex存储
在你的项目里新建一个store文件夹,里面放一个index.js:
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// 这里放你的初始状态,比如:
count: 0
},
getters: {
// 获取状态的方法
getCount: state => state.count
},
mutations: {
// 改变状态的方法
increment(state) {
state.count++
}
},
actions: {
// 异步操作和触发mutation
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})
第三步:在Vue应用中使用Vuex
在你的主入口文件(通常是main.js或app.js),引入并使用这个store:
// main.js 或 app.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
new Vue({
store, // 这一行把store添加到Vue实例中
render: h => h(App),
}).$mount('#app')
第四步:在组件里吃蛋糕(使用状态)
现在,在任何组件里,你都可以通过this.$store来访问状态、触发actions了:
<!-- 一个组件的模板 -->
<template>
<button @click="incrementCounter">{{ counter }}</button>
</template>
<script>
export default {
computed: {
counter() {
return this.$store.getters.getCount
}
},
methods: {
incrementCounter() {
this.$store.dispatch('asyncIncrement')
}
}
}
</script>