1. VueX是什么?
Vue是实现组件全局状态(数据)管理的一种机制,可以方便的实现组件之间的数据的共享。
2. 使用Vuex有什么好处?
项目使用vuex可以大量减少数据在各组件之间的传递,如图所示。Vuex使用了Store对数据进行了全局统一管理。
3. 使用Vuex统一管理状态的好处
能够在vuex中集中管理共享的数据,易于开发和后期维护
能够高效的实现组件之间的数据共享,提高开发效率
存储在vuex中的数据是响应式的,能够实时保持数据与页面的同步
4. 什么样的数据适合使用vuex呢?
组件之间共享的数据,适合使用vuex进行管理。而对于组件中一些私有的数据,依旧可以存储在组件自身的data中。
5. Vuex的四大核心
1. State
存放数据
2.Mutation
变更数据
this.$store.commit(**)
3. Action
异步操作变更数据
this.$store.dispatch(**)
4. Getter
对数据进行加工处理形成新的数据
this.$store.getters.**
6. Vuex的使用
首先 先看下我的vuex示例项目的基本结构
然后 配置加载vuex
## main.js
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
store,
render: h => h(App)
}).$mount('#app')
## index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count: 0
},
mutations: {
add1 (state) {
state.count++
}
},
actions: {
add2 (context) {
setTimeout(() => {
// 异步调用mutations中的方法 适宜于异步操作
// 不能直接修改state中的数据 需要借助mutations中的方法进行操作
context.commit('add1')
}, 1000)
}
},
getters: {
show (state) {
return 'hello world!' + state.count
}
}
})
## APP.vue
<template>
<div>
VueX的使用
<my-test></my-test>
</div>
</template>
<script>
import test from './components/test.vue'
export default {
data () {
return {
}
},
components: {
'my-test': test
}
}
</script>
## test.vue
<template>
<div>
<div>{{$store.getters.show}}</div>
当前值为{{count}}
<button @click="add1()">+1 mutations</button>
<button @click="add2()">+1 actions</button>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
data () {
return {
}
},
computed: {
...mapState(['count']), // 获取Store State中的值
...mapGetters(['show']) // 调用Getters中的方法
},
methods: {
...mapMutations(['add1']), // 调用Mutations
...mapActions(['add2']) // 调用Actions 异步
}
}
</script>
接下来看看效果演示