返回

vue之vuex的使用

Created By ZOU on Dec 18 2020

在vue中一些跨组件,同级或者父级传值时经常会用到vuex,vuex是什么?他是专门为vue开发的一个状态管理工具,他主要负责组件间状态的共享,并且在修改状态时也能有所预测,下面看看怎么使用:

store.js

import Vue from 'vue'
import Vuex from 'vuex'
// 引入vue文件
import App from 'App.vue'
// 使用vue.use注入一些初始化方法,比如this.$store的实现
Vue.use(Vuex)
// 创建store对象
const store = new Vuex.Store({
state: {
/** 状态 */
value: 1
},
mutations: {
/** 修改值 */
UPDATE_VALUE(state, value) {
state.value = value
}
},
actions: {
/** 修改值操作 */
changeValue({ commit }, value) {
commit('UPDATE_VALUE', value)
}
}
}
export default store

主入口文件:main.js

import Vue from 'vue'
// 引入store
import store from './store.js'
// 创建vue实例
const app = new Vue({
// 配合vuex注入获取到store
store,
// 渲染虚拟node
render: h => h(App)
})

app组件文件: App.vue

<template>
<div id="app">
<div>App组件直接通过$store获取state:{ { $store.state.value } }</div>
<div>App组件通过mapState获取的state:{ { value } }</div>
</div>
</template>
<script>
import { mapState } from 'vuex'
import Home from 'Home.vue'
export default {
name: 'App',
components: {
Home
},
computed: {
// 通过mapState获取状态
...mapState([
'value'
])
}
}
</script>

Home组件:Home.vue

<template>
<div id="home">
<div>Home组件直接通过$store获取state:{ { $store.state.value } }</div>
<div>Home组件通过mapState获取的state:{ { value } }</div>
</div>
</template>
<script>
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
name: 'Home',
components: {
Home
},
computed: {
// 通过mapState获取状态
...mapState([
'value'
])
},
created() {
// 修改状态值为2
this.updateValue(2)
// 修改value值为3
this.changeValue(3)
},
methods: {
// 通过mapMutations设置updateValue方法
...mapMutations({
updateValue: 'UPDATE_VALUE'
}),
// 通过mapActions设置changeValue方法
...mapActions([
'changeValue'
])
}
}
</script>

app组件和home组件获取状态的方式一样,也能轻松的修改,这样就能实现共享数据状态。

而mutations和actions的区别是什么呢?mutations是同步的而且只能修改当前模块的状态,而actions可以调用多个mutation去修改数据也能去调用其他的action,甚至是跨模块调用,而且action还支持异步处理,而mutation是只能同步。

标签: javascript vue vuex