VUEX简单复习

一、运用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四大特性