一、概念
应用中多个组件的共享状态进行集中式的管理(读/写),也是一种组件间通信的方式,且适用于任意组件间通信。
二、vuex工作原理图:
dispatch mutate render commit 发送 改变 渲染 提交
vuex 可以在开发者工具探测到
三、vuex使用
1.安装包
npm i vuex
2.在src下创建文件夹及文件 store/index.js
在main.js 导入 store
3.在上提到的文件加入代码
--粗稿
import Vue from 'vue';
// 导入并使用 vuex
import VueX from 'vuex';
Vue.use(VueX)
// 业务逻辑层--响应组件的动作
const actions = {
// 在vue组件文件中使用:this.$store.dispatch("jian",this.value)
jian(context, value) {
if (value >= 0) {
setTimeout(() => { context.commit('JIAN', value) }, 200)
}
}
}
// 数据访问层--操作数据 (字母对应大写,多单词用下划线)
const mutations = {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
},
ADD_List(state, p) {
state.personList.unshift(p);
}
}
// 数据层
const state = {
sum: 0,
school: '东咚',
subject: 'web前端',
personList: [
{ id: '01', name: '张三', age: 18 },
{ id: '02', name: '张四', age: 20 },
]
}
// getters
const getters = {
bigSum(state) {
return state.sum * 10
}
}
export default new VueX.Store({
actions,
mutations,
state,
getters
})
--细稿(模块化)
按照组件或作用将不同的 actions, mutations, state, getters 放入不同的 js文件
import Vue from 'vue';
import VueX from 'vuex';
Vue.use(VueX)
// CountOption和PersonOption 应该包装成 js文件再 import
const CountOption = {
namespaced:true, // 配合 ...map
actions: {
jian(context, value) {
if (value >= 0) {
setTimeout(() => { context.commit('JIAN', value) }, 200)
}
}
},
mutations: {
JIA(state, value) {
state.sum += value
},
JIAN(state, value) {
state.sum -= value
},
},
state: {
sum: 0,
school: '东咚',
subject: 'web前端',
},
getters: {
bigSum(state) {
return state.sum * 10
}
},
}
const PersonOption = {
namespaced:true,
actions: {},
mutations: {
ADD_List(state, p) {
state.personList.unshift(p);
}
},
state: {
personList: [
{ id: '01', name: '张三', age: 18 },
{ id: '02', name: '张四', age: 20 },
]
},
getters: {},
}
export default new VueX.Store({
modules: {
CountOption,
PersonOption
}
})
4.map方法
4.1 非map方法:直接 dispatch 或者 commit
// 路径要写明,nanoid 是生成唯一id的包
const p = { id: nanoid(), name: this.name, age: 18 };
this.$store.commit("PersonOption/ADD_List", p);
4.2 四种map方法(两个计算属性,两个函数)
先导入:import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
namespaced:true 若是非模块化,...map 不用传名字(如:CountOption)
// vueComponent
computed: {
// ...mapState("CountOption", { sum: "sum", school: "school", subject: "subject" }), // 对象写法
...mapState("CountOption", ["sum", "school", "subject"]), // 名字相同可以简写成 数组
...mapGetters("CountOption", ["bigSum"]),
...mapState("PersonOption", ["personList"]),
},
methods: {
// template <button @click="increment(n);clicks();">button</button> 这里传参了哦
// 这两个如果要用数组简写,需要把index.js的JIA,jian改名,或者上面@click事件increment(n)改名 JIA(n)
...mapMutations("CountOption", { increment: "JIA" }), // 对应 commit
...mapActions("CountOption", { decrement: "jian" }), // 对应 dispatch
clicks() {
console.log("多个点击事件被触发");
}
},