Vuex笔记
Vuex是专门在Vue中实现集中式状态(数据)管理的一个Vue插件,他是一种组件间通信的方式,适用于任意组件之间的通信
安装
下载
在Vue2中安装Vuex
npm install vuex@3 --save
在Vue3中安装Vuex
npm install vuex@next --save
安装
在scr
下创建store/index.js
import Vue from 'vue'; // 引入Vue
import Vuex from 'vuex'; // 引入Vuex
Vue.use(Vuex); // 安装Vuex
const actions = {};
const mutations = {};
const state = {};
export default new Vuex.Store({
actions,
mutations,
state,
});
在main.js
中引入store
import Vue from 'vue';
import App from './App.vue';
import store from '@/store'; // 引入store
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
store,
}).$mount('#app');
使用
原理图
Actions
相当于餐厅的服务员处理业务逻辑,Mutations
相当于后厨,是真正State
中的数据人,State
相当于菜。
若没有网络请求或其他业务逻辑,组件中也可以越过actions,即不写dispatch
,直接编写commit
简单的案例
App.vue
<template>
<div id="app">
<h1>当前值:h1>
<TheButton>TheButton>
div>
template>
<script>
import TheButton from "@/components/TheButton.vue";
export default {
name: "App",
components: { TheButton },
};
script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
font-smoothing: antialiased;
osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
style>
子组件
<template>
<div id="the-count">
<button @click="add">count++button>
<button @click="sub">count--button>
<button @click="addDelayed">延迟3s加button>
div>
template>
<script>
export default {
name: "TheCount",
methods: {
// 组件中修改Vuex中的数据 $store.commit('mutations中的方法名',数据) 简单逻辑跳过dispatch,直接进行commit
add() {
this.$store.commit("add", 1);
},
sub() {
this.$store.commit("sub", 1);
},
// 组件中修改Vuex中的数据 $store.dispatch('action中的方法名',数据) 一般用于有发送ajax请求的逻辑处理
addDelayed() {
this.$store.dispatch("addDelayed", 1);
},
},
};
script>
<style>
style>
store/index.js
import Vue from 'vue'; // 引入Vue
import Vuex from 'vuex'; // 引入Vuex
Vue.use(Vuex); // 安装Vuex
const actions = {
// 处理大量业务逻辑,例如发送ajax
addDelayed(state, value) {
setTimeout(() => {
// 为了区分actions和mutations建议大写方法名
state.commit('ADDDELAYED', value);
}, 3000);
},
};
const mutations = {
add(state, value) {
console.log(state, value);
state.count += value;
},
sub(state, value) {
console.log(state, value);
state.count -= value;
},
ADDDELAYED(state, value) {
console.log(state, value);
state.count += value;
},
};
const state = {
count: 0,
};
export default new Vuex.Store({
actions,
mutations,
state,
});
getters的使用
当state中的数据需要经过加工后再使用时,可以使用getters加工。
同actions、mutations、state一样
// 创建getters配置项
const getters = {
bigCount(state){
return state.count * 10
}
}
export default new Vuex.Store({
actions,
mutations,
state,
getters // 添加getters
});
组件中读取数据:$store.getters.bigCount
四个map方法的使用
在组件中导入
import { mapActions, mapGetters, mapMutations, mapState } from "vuex";
-
mapState方法:用于帮助我们映射
state
中的数据为计算属性computed: { //借助mapState生成计算属性:sum、school、subject(对象写法) mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性:sum、school、subject(数组写法) mapState(['sum','school','subject']), },
-
mapGetters方法:用于帮助我们映射
getters
中的数据为计算属性computed: { //借助mapGetters生成计算属性:bigSum(对象写法) mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性:bigSum(数组写法) mapGetters(['bigSum']) },
-
mapActions方法:用于帮助我们生成与
actions
对话的方法,即:包含$store.dispatch(xxx)
的函数methods:{ //靠mapActions生成:incrementOdd、incrementWait(对象形式) mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成:incrementOdd、incrementWait(数组形式) mapActions(['jiaOdd','jiaWait']) }
-
mapMutations方法:用于帮助我们生成与
mutations
对话的方法,即:包含$store.commit(xxx)
的函数methods:{ //靠mapActions生成:increment、decrement(对象形式) mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成:JIA、JIAN(对象形式) mapMutations(['JIA','JIAN']), }
阅读剩余
THE END