vuex

vuex是什么

vuex的几个核心概念

1.State(放状态信息)

1）state的基础用法就是:将状态信息放入state,state就会帮忙管理，其他组件可以通过 $store.state.属性名称 来进行使用

2）单一状态树
只使用一个store

2.Getters

getters的用法类似于计算属性computed，计算属性的用法就是（当数据想要展示的时候，直接使用就可以，如果数据必须经过一系列变化之后再被使用，就可以通过计算属性完成这些操作）

getters的用法就是（state中存放了一些状态（这些状态可以看成数据），这些数据需要经过一系列变化之后给其他组件使用，则可以在getters里定义各种方法，然后在其他组件中通过 $store.getters.属性名称 来获取对应的数据）

案例一：state中定义了 counter:10000, 现在想得到counter的平方

const store = new Vuex.Store({
state: {
counter: 1000
},
getters: {
powerCounter(state) {
return state.counter * state.counter;
}
},

{{ $store.state.counter }}

{{ $store.getters.powerCounter }}

案例二：state中定义了 关于学生学号、姓名、年龄信息的数组，想要将大于20岁的学生的信息显示出来

const store = new Vuex.Store({
state: {
students: [
{ id: 100, name: "张三", age: 25 },
{ id: 101, name: "李四", age: 18 },
{ id: 102, name: "王五", age: 12 },
{ id: 103, name: "赵四", age: 22 }
]
},
getters: {
more20stu(state) {
return state.students.filter(s => s.age >= 20);
}
},

-----大于20的学生的信息------

{{ $store.getters.more20stu }}

案例三：想要获取年龄大于20的学生的个数

const store = new Vuex.Store({
state: {
students: [
{ id: 100, name: "张三", age: 25 },
{ id: 101, name: "李四", age: 18 },
{ id: 102, name: "王五", age: 12 },
{ id: 103, name: "赵四", age: 22 }
]
},
getters: {
more20stu(state) {
return state.students.filter(s => s.age >= 20);
}，

more20stulen(state) {
return state.students.filter(s => s.age >= 20).length;
}，
more20stulength(state, getters) {
return getters.more20stu.length;
}
},

-----大于20的学生的信息------

{{ $store.getters.more20stu }}

----大于20的学生个数为------

{{ $store.getters.more20stulen }}

{{ $store.getters.more20stulength }}

案例四：不提前规定年龄，这个年龄想要通过用户输入一个年龄值，然后返回相符合要求的学生信息

getters: {
less20stu(state) {
return function(age) {
return state.students.filter(s => s.age <= age);
};

}
}，

-----小于20的学生的信息------

{{ $store.getters.less20stu(20) }}

3.Mutation

1)vuex状态的唯一更新方式：提交mutation
2)mutation 主要包含两部分
①字符串的事件类型（type）
②一个回调函数（handler）该回调函数的第一个参数是state

3）传递参数

<button @click="changeCount(5)">+5
<button @click="changeCount(10)">+10
<button @click="addCount(200)">+100
<button @click="addStudent">添加学生

methods: {
changeCount(count) {
this.$store.commit("changeCount", count);
},
addCount(count) {
this.$store.commit({
type: "addCount",
count
});
},
addStudent() {
const stu = { id: 104, name: "刘能", age: 30 };
this.$store.commit("addStudent", stu);
}
}
};

state: {
counter: 1000,
students: [
{ id: 100, name: "张三", age: 25 },
{ id: 101, name: "李四", age: 18 },
{ id: 102, name: "王五", age: 12 },
{ id: 103, name: "赵四", age: 22 }
]
},
mutations: {
// 方法
changeCount(state, count) {
state.counter += count;
},
addCount(state, payload) {
console.log(payload);
state.counter += payload.count;
},
addStudent(state, stu) {
state.students.push(stu);
}
},