vuex基本语法
vuex是一个专为 Vue.js 应用程序开发的状态管理模式, 采用集中式存储管理应用的所有组件的状态,解决多组件数据通信。
使用Vuex的好处:
1、数据的存取一步到位,不需要层层传递
2、数据的流动非常清晰
3、存储在Vuex中的数据都是响应式的
那么我们先来思考一个问题:什么样的数据适合存储到Vuex中?
答案是:需要共享的数据
Vuex的作用就是:频繁、大范围的数据共享
vue官方提供的独立于组件体系之外的,管理公共数据的工具
原文链接:https://blog.csdn.net/m0_70477767/article/details/125155540
vuex 五个概念
state 存放数据
getters 过滤数据
mutations 操作数据 但是不可以异步操作
actions 异步操作 通过调用mutations里的方法去改变state数据
modules 模块化
基本语法使用:
this,$store.state.state中的键
this.$store.getters.getters中的键
this.$store.commit( ' mutations中的方法名 ' )
this.$store.dispatch( ' actions中的方法名 ' )
其中 getters 和 mutations中系统传入参数state
actions系统传入参数context 通过context.commit去调用mutations中的方法改变state中的数据
话不多说 直接上才艺(代码)
本文在此使用单文件方式去使用vuex
1 导入vue 和 vuex 库
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.9/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3"></script>
这里避坑 vue默认vue3版本 vuex默认vuex4版本
vuex4只能在vue3 中使用
vuex3只能在vue2 中使用
2 创建store
const store = new Vuex.Store({
state: {
age: 11,
sex: 1,
},
getters: {
//这里的state为系统传入的
//sexFiltter过滤state中数据
sexFiltter(state) {
return state.sex == 1 ? "男" : "女";
},
},
mutations: {
//这里的state为系统传入的
//addAge改变state中数据
addAge(state) {
console.log("mutations");
state.age++;
},
},
actions: {
//这里的context为系统传入
//addAge通过调用mutations中的方法去修改数据
addAge(context) {
console.log("actions");
context.commit("addAge");
},
},
});
3 挂载到vue中
new Vue({
el: "#app",
store,
});
vuex基本语法传递参数
state 与 getters 在computed中写 mutations 与 actions 在methods中写<div id="app">
<h1>{{$store.state.age}}</h1>
<h1>{{$store.getters.sexFiltter}}</h1>
<hr />
<button @click="$store.commit('addAge',2)">add</button>
<button @click="$store.dispatch('addAge',10)">add</button>
</div>
const store = new Vuex.Store({
state: {
age: 11,
sex: 1,
},
getters: {
sexFiltter(state) {
return state.sex == 1 ? "男" : "女";
},
},
mutations: {
addAge(state, payload) {
console.log("mutations");
state.age += payload;
},
},
actions: {
addAge(context, payload) {
console.log("actions");
context.commit("addAge", payload);
},
},
});
new Vue({
el: "#app",
store,
});
vuex辅助语法
正常
this,$store.state.state中的键
this.$store.getters.getters中的键
this.$store.commit( ' mutations中的方法名 ' )
this.$store.dispatch( ' actions中的方法名 ' )
辅助语法
...Vuex.mapState({
键:state=>state.键
})
...Vuex.mapGetters({
键:'getters中的键'
})
...Vuex.mapMutations({
键:'mutations中的键'
})
...Vuex.mapActions({
键:'actions中的键'
})
const store = new Vuex.Store({
state: {
age: 1,
sex: 1,
},
getters: {
sexFiltter(state) {
return state.sex === 1 ? "男" : "女";
},
},
mutations: {
addAge(state, payload) {
state.age += payload.num;
},
},
actions: {},
});
new Vue({
el: "#app",
store,
computed: {
sexFiltter() {
return this.$store.state.sex;
},
age() {
return this.$store.state.age;
},
},
methods: {
fn() {
this.$store.commit("addAge", { num: 5 });
},
},
});
vuex模块化
当我们数据很多很大的时候,数据的管理不是很好,我们将不同数据分门别类的进行管理
一个模块的数据放一起,
此时modules中有个键 namespaced 就是将modules中的键与公共仓库的键区分的关键
<div id="app">
<h3>这是公共的</h3>
{{newage}}
<button @click="fn({num:1})">anniu</button>
<h3>
a模块 {{newage1}}
<button @click="fn1({num:11})">anniu</button>
</h3>
<h3>
b模块 {{bage}}
<button @click="fn2({num:22})">anniu</button>
</h3>
</div>
<script>
const b = {
namespaced: true,
state: { age: 111 },
mutations: {
changeAge(state, payload) {
state.age = parseFloat(state.age) + payload.num;
},
},
};
const store = new Vuex.Store({
state: {
age: 1,
sex: 1,
},
getters: {
changeSex(state) {
return state.sex == 1 ? "男" : "女";
},
},
mutations: {
addAge(state, payload) {
state.age = parseFloat(state.age) + payload.num;
},
},
actions: {},
modules: {
a: {
namespaced: true,
state: { age: 11 },
mutations: {
changeAge(state, payload) {
state.age = parseFloat(state.age) + payload.num;
},
},
},
b,
},
});
new Vue({
el: "#app",
data: {
age: 1,
},
store,
computed: {
...Vuex.mapState({
newage: (state) => state.age,
}),
...Vuex.mapState({
newage1: (state) => state.a.age,
bage: (state) => state.b.age,
}),
},
methods: {
...Vuex.mapMutations({
fn: "addAge",
fn1: "a/changeAge",
fn2: "b/changeAge",
}),
},
});
</script>
听空天院的大佬同学说现在流行pinia了,等我学学下次更新
下次准备更新一个系列
仿照element-admin后台系统 从 0 =》1 完成并上线