初学vuex知识笔记

今天看了一下vuex的中文官网，简单总结一下新手对vuex知识的理解。

vuex的核心就是store（仓库）,主要知识点分为state，getter，mutation，action，module。

 

state:是一个用来存储状态量的对象，个人感觉挺像组件里面的data。

getter:相当于是store的计算属性，可以对state里面的状态量进行一些计算，getter接受state作为第一个参数。

mutation:提交mutation是改变store中状态唯一的方法，官方说非常类似事件。mutation中的回调函数接受state作为第一个参数。个人类比觉挺像组件中的methods的，mutation对象中就是一些对state中值的一些改变操作，当mutation被提交之后改变就会生效。提交mutation用的是store.commit方法。值得强调的是mutation都是同步事务。

action:action的用法与mutation非常相似，不同的是action提交的是mutation,而不是直接变更状态，同时action可以包含任何异步操作。action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，触发action通过store.dispatch方法。

注意：异步操作要写在action中，mutation是同步的。

module:模块，当应用比较复杂的时候，store对象会变得十分臃肿，这个时候可以将store划分成模块，每个模块都有自己的state、getter、mutation、action，甚至是嵌套子模块。

 

关于在vue-cli创建的项目中使用vuex的简单用法：

首先在项目中安装vuex，npm install vuex --save命令安装。

可以创建一个叫做store的文件夹，将vuex相关的东西都写在这个文件夹中。注意，在js文件中写vuex之前首先要引入vue和vuex，而且一定要用Vue.use(Vuex)这一句。然后就可以开始创建store对象了。

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

然后在项目的main.js文件中引入store,同时在main.js中的vue实例里面加上一个store项，这样就可以在其他所有组件中通过this.$store使用store里面的状态了。

 

vuex适用于大型单页应用，如果是很简单的项目使用vuex反而会显得繁重冗余，所以小型的项目还是不要用vuex了。

好了，这样vuex的基本使用方法就介绍完了。