要学习

前言

vuex，需要知道这里的路线是什么吗？ 为什么我们不能像原来那样直接用标签写链接？ 怎么使用vue-router呢？ 常见的路由选择操作是什么？ 这些问题是本篇讨论的主要问题。

Vuex是什么

Vuex是专门为vue.js APP开发的状态管理模型。 使用集中存储管理APP应用程序的所有组件的状态，并确保状态按照适当的规则以可预测的方式发生变化。

State :类似于单组件的data (。

Getter :与属性计算类似，Getter返回值基于相关性进行缓存，并且仅在相关性值发生更改时重新计算。

Mutation :只能通过Mutation更改状态。 Mutation已同步。

操作：操作不是直接更改状态，而是提交mutation。 操作是异步操作。

module :在vuex中，可以将store分割为模块。 每个模块都有自己的state、mutation、action、getter，甚至是嵌套的子模块

如何使用Vuex

首先，安装Vuex

NPM安装视图

接下来，创建存储。 创建过程只是为——提供第一个state对象和几个mutation。

setTodos ()。

常数URL=' https://本地主机：44399/API /待办事宜？ page索引=1pagesize=100 '；

是axios.get(URL )。

. then ((响应)={

控制台日志(响应；

if (response .数据.代码==0) {

this.todos=响应.数据.结果；

}

)；

(、

然后，将store/index.js文件导入到main.js文件中。

创建待办事项(项目) {

常数URL=' https://本地主机：44399/API /待办事项'；

axios.post (网址，项目) )。

. then ((响应)={

控制台日志(响应；

if (response .数据.代码==0) {

this.setTodos (；

}

)；

this.selectedIndex=-1；

this.selectedItem={}；

this.adddialogvisible=假；

(、

最后，创建新组件TodoListWithVuex.vue

更新待办事项(项目) {

常数URL=` https://本地主机：44399/API /待办事项/$ `；

axios.put (网址，项目) )。

. then ((响应)={

控制台日志(响应；

if (response .数据.代码==0) {

this.setTodos (；

}

)；

this.selectedIndex=-1；

this.selectedItem={}；

this.editDialogVisible=false；

(、

小结

到目前为止，我们已经完成了Vuex的基本用法。 Vuex主要管理多个组件的状态共享。 如果只是单个组件的交互作用和父子组件的交互作用，则应该不需要使用。

此处使用的代码可以在https://github.com/zcqiand/miscellaneous/tree/master/vue中找到