Preface

首先来说一下VueX。之前的项目参考了MVC设计模式，写了一个model文件全局管理数据，后来查阅了资料，原来真的有这么一个直接全局管理数据的小工具。于是，查阅了说明书，总结了VueX。

说明书地址：vuex.vuejs.org/zh/guide/

VueX的定义

官方文档说Vuex是一个状态管理的仓库。这里的状态（state），我的理解就是整个项目某一刻所有的数据的集合体。
不能手动修改这个状态的值。必须要commit mutation才能修改。我的理解这就是MVC设计模式中的Model部分，然后把操作数据（状态）的方法封装在mutaion里面，需要用方法操作内部数据。
极具有特色的是，这也是Vue的特点，这个仓库是响应式的，state（数据）的改变，组件也会即时得到更新，或许这就是VueX里为啥要花里胡哨弄个commit命令吧，可能 commit引起state的变化？于是就便于更新数据？

项目前的尝试

在看了官网的栗子介绍后，初次尝试在项目中使用Vuex。

首先，要在Component里面声明一个computed，然后就可以在template里面调用count。
直接拿Vuex的栗子来。

const Counter={
template:`<div>{{count}}</div>`,
computed:{
	count(){
	return store.state.count
	}
}
}

有一个小细节。
官网用了store.state，我也尝试了下，需要在这个使用的页面import store from "@/store/index.ts"，很麻烦。实际上，看了下index.ts的一句话:

**这句话的意思是把store绑定到Vue.prototype. $store上。即：** ```Vue.prototype.$ store=store <br>然后在main.ts中, ![](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/70cb52d8a9ed45a08d14e1aec5fa4265~tplv-k3u1fbpfcp-zoom-1.image) 等价于store:store```,所以不用在import啦,直接this.$store.state就搞定.

关于state,mutation,action

mutaion存放方法,用于同步操作,而action是用于异步操作,会调用mutation.

总结

vuex读数据就是this.$store.state.count,而写数据,就是this.$store.commit('increment').

将我手写的store改写(复制)到vuex中

1. 在改写TagslistModel中的createTag时,一坑:

** mutation里的方法好像不让返回其他的结果,如字符串,数字.**

比如我手写的原生方法, 我是设定返回duplicated和success 来记录成功与失败,结果在mutation中改写,报的错误是mutation里的方法返回的是void??? 于是我查了下别人的经验,原来是还需要把duplicated和success同一为一个数据保存在state中!! 于是,我创建了一个保存创建信息的data: 再改写: 然后再在外部引用createTag方法.现在终于知道VueX的好处了.这样写的代码很美.

2.按照官网文档将state里的数据写在computed里面,结果拿出来用会报错???

为什么不给用tag...

于是我查遍了文档,发现用get代替可以解决这个问题

于是都将所有的computed都改成了get.

总结

使用Vuex最基本的步骤:

1. 初始化.

要在store.index.ts里写Vue use(Vuex),然后在main.ts里的new Vue里要写上store,表示可以用store.

2.基本读写操作.

读操作:在你得组件里声明对象用computed{count:this.$store.state.count} 或者直接在下面用类函数 set count(){this.$store.state.count}
写操作:store.commit('一个mutations里的操作',payload),注意mutations里的操作只能添加两个参数,一个状态state,一个payload.

小凯记账(3.0) VueX的使用踩坑