vue学习之vue状态管理，提供简单demo和配套视频（别人的。。）

vue开发一年多了，然后发现很多知识都不会特意回来看视频学习了一下，找到一个简单的vue状态管理视频和大家一起分享一下比较简单， Demo我也已经写好了 ，等审核完成了我就加上链接，分数我没办法修改，可以再这里复制代码；个人建议是和视频 一起写代码，这样可以加深印象，更加容易记住，然后去整理相关的内容，或者添加注释

链接: 视屏地址 ，个人觉得讲的比较好，虽然是外国大佬的。。

由于我用了路由所以目录结构可能不太一致，不过也没有多大的区别，只是组件的添加而已

在src文件夹下面新建store文件夹新建index.js文件

index.js

import Vuex from "vuex";
import Vue from "vue";
import todos from "./modules/todos";


//加载vuex
Vue.use(Vuex);

//创建store
export default new Vuex.Store({
    modules:{
        todos
    }
})

在store文件夹里面新建modules文件，然后新建todos.js

todos.js

import axios from "axios";


const state = {//state中存储数据
    todos: []
};

const getters = {//getters中获取数据(只读不写)
    allTodos: state => state.todos
};
//同步获取网络数据
const actions = {//actions用于提交mutation,可以实现异步操作
    //异步方法，不会阻塞后面代码的执行
    async fetchTodos({ commit }) {
        //从网络中获取数据，此处代码为执行完成后才会执行打印片段，或提交片段代码
        const respoense = await axios.get('http://jsonplaceholder.typicode.com/todos');
        console.log(respoense.data);
        //提交数据
        commit("setTodos", respoense.data);
    },
    //异步方法，不会阻塞后面代码的执行
    async addTodo({ commit }, title) {
        //此处代码为执行完成后才会执行打印片段，或提交片段代码
        const respoense = await axios.post('http://jsonplaceholder.typicode.com/todos', { title, completed: false });
        //提交数据
        commit("newTodo", respoense.data)
    },
    //异步方法，不会阻塞后面代码的执行
    async deleteTodo({ commit }, id) {
        //此处代码为执行完成后才会执行打印片段，或提交片段代码
        await axios.delete(`http://jsonplaceholder.typicode.com/todos/${id}`);
        //提交数据
        commit('removeTodo', id)
    },
    //异步方法，不会阻塞后面代码的执行
    async filterTodos({ commit }, e) {
        // Get selected number
        const limit = parseInt(e.target.options[e.target.options.selectedIndex].innerText)
        //此处代码为执行完成后才会执行打印片段，或提交片段代码
        const respoense = await axios.get(`http://jsonplaceholder.typicode.com/todos?_limit=${limit}`);
        //提交数据
        commit('setTodos', respoense.data)
    },
    //异步方法，不会阻塞后面代码的执行
    async updataTodo({ commit }, updTodo) {
        //此处代码为执行完成后才会执行打印片段，或提交片段代码
        const respoense = await axios.put(`http://jsonplaceholder.typicode.com/todos/${updTodo.id}`, updTodo);
        //提交数据
        commit('updataTodo', respoense.data);
    }
};

const mutations = {//mutations中注册改变state的事件(只写不读)
    //更新数据，业务逻辑处理部分 查
    setTodos: (state, todos) => (state.todos = todos),
    //插入数据，业务逻辑处理部分 增
    newTodo: (state, todo) => state.todos.unshift(todo),
    //移除数据，业务逻辑处理部分 删
    removeTodo: (state, id) => state.todos = state.todos.filter(todo => todo.id !== id),
    //改变状态修改内容，业务逻辑处理部分 改
    updataTodo: (state, updTodo) => {
        const index = state.todos.findIndex(todo => todo.id === updTodo.id);
        if (index !== -1) {
            state.todos.splice(index, 1, updTodo);
        }
    }

};

export default {
    state,
    getters,
    actions,
    mutations
};

index.vue

<!-- 首页 -->
<template>
  <div>
  <!--  添加数据组件 -->
    <AddTodos />
    <!-- 修改数据组件 -->
    <FilterTodos />
    <!-- 数据列表组件 -->
    <Todos />
  </div>
</template>

<script>
import Todos from "./Todos.vue";
import AddTodos from "./AddTodos.vue";
import FilterTodos from "./FilterTodos.vue";
export default {
  name: "index",
  components: {
    Todos,
    AddTodos,
    FilterTodos
  },
  data() {
    return {};
  },

  computed: {},

  methods: {}
};
</script>
<style scoped>
</style>

Todos.vue 由于没有删除图标所以随便设置的一个颜色。。。

<template>
  <div>
    <h3>Todos</h3>
    <div class="legend">
      <span>Double click to mark as complete</span>
      <span>
        <span class="incomplete-box"></span> = Incomplete
      </span>
      <span>
        <span class="complete-box"></span> =Complete
      </span>
    </div>

    <div class="todos">
      <!-- 加载列表数据，设置双击事件 -->
      <div @dblclick="onDblClick(todo)" v-for="todo in allTodos" :key="todo.id"  class="todo" :class="{'is-complete':todo.completed}">
        {{todo.title}}
        <!-- 点击更具id删除数据 -->
        <i @click="deleteTodo(todo.id)" class="delete"></i>
      </div>
    </div>
  </div>
</template>
<script>
//引入相关的方法
import { mapGetters, mapActions } from "vuex";

export default {
  name: "Todos",
  methods: {
    //仅仅只是映射到此处并没有调用接口
    ...mapActions(["fetchTodos", "deleteTodo", "updataTodo"]),
    onDblClick(todo) {
      const updTodo = {
        id: todo.id,
        title: todo.title,
        completed: !todo.completed
      };
      //调用修改数据方法
      this.updataTodo(updTodo);
    }
  },
  //使用对象展开运算符将 getter 混入 computed 对象中
  computed: mapGetters(["allTodos"]),
  created() {
    //加载方法获取 allTodos 数据列表
    this.fetchTodos();
  }
};
</script>
<style scoped>
.todos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}
.todo {
  border: 1px solid #ccc;
  background: #41b883;
  padding: 1rem;
  border-radius: 5px;
  text-align: center;
  position: relative;
  cursor: pointer;
  /* display: flex;
  align-items: center;
  justify-content: center; */
}
.delete {
  height: 15px;
  width: 15px;
  background: #fff;
  margin-left: 30px;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}

.legend {
  display: flex;
  justify-content: space-around;
  margin-bottom: 1rem;
}
.complete-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #34595e;
}

.incomplete-box {
  display: inline-block;
  width: 10px;
  height: 10px;
  background: #41b883;
}
.is-complete{
  background: #35495e;
  color: #fff;
  
}

@media (max-width: 500px) {
  .todos {
    grid-template-columns: 1fr;
  }
}
</style>
</style>

AddTodos.vue

<!--  -->
<template>
  <div>
    <h3>add Todo</h3>
    <div class="add">
      <form @submit="onSubmit">
        <input type="text" v-model="title" placeholder="Add Todo..." />
        <input type="submit" value="Submit" />
      </form>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "AddTodo",
  data() {
    return {
      title: ""
    };
  },
  methods: {
    //映射数据添加方法
    ...mapActions(["addTodo"]),
    onSubmit(e) {
      e.preventDefault();
      //调用数据添加方法
      this.addTodo(this.title);
    }
  }
};
</script>
<style scoped>
form {
  display: flex;
}
input[type="text"] {
  flex: 10;
  padding: 10px;
  border: 1px solid #41b883;
  outline: 0;
}
input[type="submit"] {
  flex: 2;
  background: #41b883;
  color: #fff;
  border: 1px solid #41b883;
  cursor: pointer;
}
</style>

FilterTodos.vue

<!--  -->
<template>
  <div>
    Filter Todos:
    <select @change="filterTodos($event)">
      <option value="200">200</option>
      <option value="100">100</option>
      <option value="50">50</option>
      <option value="20">20</option>
      <option value="10">10</option>
      <option value="5">5</option>
    </select>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: 'FilterTodos',

  data() {
    return {
    };
  },

  components: {},

  computed: {},


  methods: {
      //映射条数加载限制
      ...mapActions(['filterTodos'])
  }
};
</script>
<style scoped>
select{
    margin-top: 20px;
    padding: 6px;
    border: #41b883 solid 1px;
}
</style>

所有代码都在这里请大佬忽视，萌新可以看看，看懂了之后可以去参考其他各种的admin看看别人是怎么写的，然后再度学习