一、运用vuex的场景
大型应用，需要多个组件共享状态，那最好保持组件和状态隔离
image.png
二、五大模块
1、安装，然后就有store文件
2、在store文件里定义state的count字段
注意：
1、getter是根据state进行计算返回了一个新的数据，而mutation是修改了state本身
2、state里可以定义对象，数组等其他类型，getter,mutation可以返回对象，数组这些内容
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
count: 1,
},
getters: {
count_len(state) {
let a = state.count + 1;
return a;
},
},
mutations: {
countAdd(state) {
state.count++;
},
resetCount(state, e) {
state.count = e;
},
},
actions: {},
modules: {
moduleA: {
state: () => ({
count: 0,
}),
getters: {
count_len2(state) {
return state.count * 2;
},
},
mutations: {
increment2(state) {
state.count++;
},
},
},
},
});
3、在任何视图中，这里是login的视图，在计算属性里添加count这个属性
<template>
<div class="home">
<h1>这是登录页</h1>
<div>{{ $route.params.id }}</div>
<div>count:{{ connt747894651da }}</div>
<div>根据count计算(+1):{{ count_len }}</div>
<input v-model="input_value" />
<button @click="Add">增加</button>
<button @click="Reset">修改</button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "HomeView",
data() {
return {
input_value: null,
};
},
computed: {
// connt 和count_len是获取到的vuex的属性
connt747894651da() {
return this.$store.state.count;
},
count_len() {
return this.$store.getters.count_len;
},
},
补充，state和getter的区别是啥：
他们都是计算属性，所以在视图里都写在计算属性里去调用
4、要更改状态，就在mutation里提交改数据，不要通过getter去改
1)在store文件里定义mutation的事件，mutation事件方法可以接收2个参数
mutations: {
countAdd(state) {
state.count++;
},
resetCount(state, e) {
state.count = e;
},
},
2）在login视图里commit这些事件
注意调用是在方法里的commit里，可以传额外的参数，这个参数一般都是data或者对象
methods: {
Add() {
this.$store.commit("countAdd");
},
Reset() {
console.log("input_value之前的", this.input_value);
let a = Number(this.input_value);
console.log("input_value之后的", a);
this.$store.commit("resetCount", a);
},
补充，input value是data里定义的，是v-model双向绑定的
<template>
<div class="home">
<h1>这是登录页</h1>
<div>{{ $route.params.id }}</div>
<div>count:{{ connt747894651da }}</div>
<div>根据count计算(+1):{{ count_len }}</div>
<input v-model="input_value" />
<button @click="Add">增加</button>
<button @click="Reset">修改</button>
</div>
</template>
<script>
// @ is an alias to /src
export default {
name: "HomeView",
data() {
return {
input_value: null,
};
},
5、action就是在mutation的基础上异步执行
6、module
就是以防这个store对象变得很大，分了很多个module，里面分别有store,getter,mutation,action四大特性
