Vuex
是对状态的管理, 这里的状态所指的就是data
。
以前我们的组件通信一直是个问题,例如兄弟组件通信,这个时候就比较难办,如果使用Vuex
就可以很轻松的解决这个问题。
Vuex
可以将你以前放在data
里面的一些数据放在store
里面,那这样大家都从store
里面获取数据,store
数据一改变,那么其他使用这个数据的组件也改变了。(好用的很👌)
基操
- 安装
yarn add vuex
- 创建store
import Vuex from 'vuex'
Vue.use(Vuex)
- 声明
store
,src/store/index.js
import Vuex from 'vuex';
import Vue from "vue";
Vue.use(Vuex);
const state = {
data: 'this is Vuex state' // 在Vuex里面声明一个状态
};
const mutations = {
changeData: function(state, newData) {
state.data = newData; // 在Vuex里面去修改这个状态 ,凡是要想修改state里面的数据,就要使用mutations里面的函数
}
};
// 创建store, 传入Vuex的核心概念之 state,mutations
const store = new Vuex.Store({
state: state,
mutations: mutations
});
export default store;
虽然现在已经有了一个store
, 但是并没有在组件里面使用, 如果我现在需要把store
里面的数据拿出来渲染, 并且修改Vuex
里面的数据, 使得数据改变, 页面也随着改动。
- 使用到组件中,使得数据响应
views/Home/Home.vue
<template>
<div class="VuexDemo">
<div>vuex demo<div>
name is {{name}}
<button @click="changeName">修改名称</button>
</div>
</template>
<script>
import store from '../../store/index';
// 这个时候需要把store中的状态展示到页面中, 我们会在computed里面声明, 让他去获取store里面的数据
export default {
// 这样页面中就可以使用name变量, 然后就可以获取store里面的data数据, 使用computed这样还可以缓存数据, 对于优化也是很不错的
computed: {
name() {
return store.state.data
}
},
methods: {
changeName() {
// 点击事件触发这个函数, 再由这个函数去触发 Vuex里面的mutation。commit去调用mutation里面的函数,第一个参数是对应mutation里面的函数名,第二个是参数
store.commit('changeData', 'this is new Vuex State');
}
},
}
</script>
这样一套流程的话,从store
里面获取数据,然后再修改store
里面的数据重新渲染,这样就已经是对状态的一种管理了。
但是单单这样使用, 还是存在一些问题。
如果说state
里面数据特别多, 那我岂不是写了很多没啥der
用的computed
, 重复劳动了这不是。Vuex
提供了一个函数mapState
views/Home/Home.vue
// 之前
computed: {
name() {
return store.state.data
}
}
// 使用mapState
computed: mapState({
// 箭头函数可使代码更简练
count: state => state.count,
// 传字符串参数 'count' 等同于 `state => state.count`
countAlias: 'count',
// 为了能够使用 `this` 获取局部状态,必须使用常规函数
countPlusLocalState (state) {
return state.count + this.localCount
}
})
这样的话起码对store
里面多个数据 传递到组件中是可以解决了。这篇就到这里了,Vuex
打算多写几篇,写到细一点,把坑说一下,那在Vuex
里面如何进行异步操作呢?虽然可以在组件中进行请求完了,然后再commit
, 但是代码也会在UI组件
中增加, Vuex
有没有解决方案呢?请看下篇!
- 前情提要:
mutations
里面只能修改state
, 并且只能是同步 - 如果在使用
store
之前没有Vue.use(Vuex)
必然在使用过程中出现vuex computed Cannot read property 'state' of undefined"
错误,小心点 靓仔
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。