前言
要学习Vuex就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题。
Vuex是什么
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
State：类似与单组件中的data ()。
Getter：像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。
Mutation：状态只能通过mutation修改，mutation是同步的。
Action：Action 提交的是 mutation，而不是直接变更状态。Action是异步操作。
Module：Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
如何使用Vuex
首先，安装Vuex
npm install Vuex
接下来，创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：
setTodos() {
const url = "https://localhost:44399/api/todo?pageIndex=1&pageSize=100";
axios.get(url)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.Todos = response.data.Result;
}
});
},
接下来，在main.js文件中引入store/index.js文件：
createTodo(item) {
const url = "https://localhost:44399/api/todo";
axios.post(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.addDialogVisible = false;
},
最后，新建一个组件TodoListWithVuex.vue
updateTodo(item) {
const url = `https://localhost:44399/api/todo/${item.Id}`;
axios.put(url, item)
.then((response) => {
console.log(response);
if (response.data.Code === 0) {
this.setTodos();
}
});
this.selectedIndex = -1;
this.selectedItem = {};
this.editDialogVisible = false;
},
小结
目前为止，我们完成了Vuex的基本用法，Vuex主要管理多组件状态的共享，如果只是单个组件交互及父子组件交互应该是没有必要使用的。
文中用到的代码我们放在：https://github.com/zcqiand/miscellaneous/tree/master/vue