Vuex复习

目录结构

vuex页面展示效果

home.vue文件调用了store中state中的counter

<template>
  <div>
    {{ $store.state.counter }}
  </div>
</template>

<script>
export default {
  name: 'about',
};
</script>

App.vue

<template>
  <div id="app">
    <h2>app中的内容，modules中的内容</h2>
    <h2>{{$store.state.a.name}}</h2>
    <button @click="updatamoduleA">修改modulea中的姓名</button>
    <h2>{{$store.getters.fullName}}</h2>
    <h2>{{$store.getters.fullNameCount}}</h2>
    <button @click="asyncUpdateName">异步修改姓名</button>
    <h2>info中的响应式练习</h2>
    <div>{{$store.state.info}}</div>
    <button @click="updateName">修改姓名</button>
    <button @click="insertAddress">新增地址</button>
    <button @click="deleteCon">删除地址</button>
    <button @click="asyncUpdateAge">异步修改年龄</button>
    <h2>APP的内容</h2>
    {{ $store.state.counter }}
    <button @click="addition">+</button>
    <button @click="subtraction">-</button>
    <button @click="addCount(5)">+5</button>
    <button @click="addCount(10)">+10</button>
    <button @click="addStunent">添加学生</button>
    <h2>APP的内容getters</h2>
    <h2>{{ $store.getters.powerCounter }}</h2>
    <h2>{{ $store.getters.getAgeMore24 }}</h2>
    <h2>{{ $store.getters.getAgeMore24Len }}</h2>
    <h2>{{ $store.getters.getAgeMore(26) }}</h2>
    <h2>Home内容</h2>
    <home></home>
  </div>
</template>

<script>
import Home from "./views/Home";
export default {
  name: "app",
  components: {
    Home,
  },
  methods: {
    // 点击加号触发按钮点击事件，按钮点击通过commit调用vuex中mutations定义的increment方法
    addition() {
      this.$store.commit("increment");
    },
    subtraction() {
      this.$store.commit("decrement");
    },
    // 带参事件执行
    addCount(count) {
      // 普通的提交封装
      // this.$store.commit('increament', count);
      // 特殊的提交封装
      this.$store.commit({
        type: "increament",
        count,
      });
    },
    addStunent() {
      const stu = { name: "Sherry", age: 15 };
      this.$store.commit("addStudent", stu);
    },
    updateName() {
      this.$store.commit("updateName");
    },
    insertAddress() {
      this.$store.commit("insertAddress");
    },
    deleteCon() {
      this.$store.commit("deleteCon");
    },
    // 通过dispatch调用异步中的asyncUpdateAge方法
    asyncUpdateAge() {
      // this.$store.dispatch("asyncUpdateAge", {
      //   message: "我是携带的信息",
      //   success: () => {
      //     console.log("里面已经完成了");
      //   },
      // });
      // 通过promise方式
      this.$store
        .dispatch("asyncUpdateAge", "这是一段从.vue传入的信息")
        .then((res) => {
          console.log(res);
        });
    },
    updatamoduleA() {
      this.$store.commit("updatamoduleA");
    },
    asyncUpdateName() {
      this.$store.dispatch("asyncUpdateName");
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
import getters from './getters';
import actions from './actions';
import mutations from './mutations';
import modulesA from './modules/modulesA';
export default new Vuex.Store({
  // 保持状态,单一状态树
  state: {
    counter: 100,
    stu: [
      { name: 'Alan', age: 20 },
      { name: 'Curry', age: 30 },
      { name: 'Shame', age: 25 },
      { name: 'jully', age: 24 },
    ],
    info: {
      name: 'kobe',
      age: 41,
      height: 1.98,
    },
  },
  // 类似于组件中的计算属性
  getters,
  // 通过vuex修改state中的值一定要通过mutations
  // mutations中参数被称为载荷(Payload)
  mutations,
  // 异步操作在action中，常用发送网络请求，异步操作必须使用action代替mutations
  actions,
  modules: {
    a: modulesA,
  },
});

getters.js

export default {
  powerCounter(state) {
    return state.counter * state.counter;
  },
  getAgeMore24(state) {
    return state.stu.filter((v) => v.age < 24);
  },
  getAgeMore24Len(state, getters) {
    return getters.getAgeMore24.length;
  },
  // 获取指定年龄大小的信息
  getAgeMore(state) {
    return (age) => state.stu.filter((v) => v.age > age);
  },
};

actions.js

export default {
  asyncUpdateAge(context, payload) {
    // setTimeout(() => {
    //   context.commit('asyncUpdateAge', payload);
    //   console.log('这是actions中打印的' + payload.message);
    //   payload.success();
    // }, 100);
    // primose方式 actions中操作本身可以返回一个promise
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        context.commit('asyncUpdateAge', payload);
        console.log('这是actions中打印的' + payload);
        resolve('里面已经执行完了');
      }, 100);
    });
  },
};

mutations.js

import Vue from 'vue';

export default {
  // 定义方法
  increment(state) {
    state.counter++;
  },
  decrement(state) {
    state.counter--;
  },
  increament(state, payload) {
    // state.counter += count;
    // 特殊的提交风格参数接收
    state.counter += payload.count;
  },
  addStudent(state, stu) {
    state.stu.push(stu);
  },
  updateName(state) {
    state.info.name = 'coderwhy';
  },
  // 新增删除响应式开发
  insertAddress(state) {
    // 实现响应式方式
    Vue.set(state.info, 'address', '洛杉矶');
  },
  deleteCon(state) {
    Vue.delete(state.info, 'address');
  },
  asyncUpdateAge(state, payload) {
    state.info.age = 20;
    console.log('这是mutations中打印的' + payload);
  },
};

modulesA.js

export default {
  state: {
    name: 'Jack',
  },
  mutations: {
    updatamoduleA(state) {
      state.name = 'Tim';
    },
  },
  getters: {
    fullName(state) {
      return state.name + 'hello';
    },
    fullNameCount(state, getters, rootState) {
      return state.name + getters.fullName + rootState.counter;
    },
  },
  actions: {
    asyncUpdateName(context) {
      setTimeout(() => {
        context.commit('updatamoduleA');
      });
    },
  },
};