从零开始系列之vue全家桶安装使用vuex

Posted blackchaos

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了从零开始系列之vue全家桶安装使用vuex相关的知识,希望对你有一定的参考价值。

什么是vuex?

vuex:Vue提供的状态管理工具,用于同一管理我们项目中各种数据的交互和重用,存储我们需要用到数据对象。 即data中属性同时有一个或几个组件同时使用,就是data中共用的属性。

中大型单页应用必备。

小型单页应用完全可以不用。

 

安装:

1.cd 项目  (如cd my-vue)后,输入

cnpm install vuex --save

 

2.在src下新建一个名叫store的文件夹,与App.vue同级,并在文件夹下新建store.js文件。因为store.js是基于vue的,所以需要引入vue和vuex。注意大小写。

import Vue from ‘vue‘
import Vuex from ‘vuex‘

3.使用vue全家桶的任何一个都需要进行use一下,所以vuex也不例外。在引入后面写上使用。

Vue.use(Vuex)

4.继续导出默认出口。

export default new Vuex.Store({

  state:{..},
  mutations:{..},
  ..
})
 
5.在 main.js 中导入
import store from ‘./store/store‘
在实例化中添加store,
 
6.开始运用~
 

应用包含:

(1)State

Vuex 使用 单一状态树 —— State,用一个对象就包含了全部的应用层级状态。就是放页面共享数据的地方。(私有数据还是放自己.vue文件更好)

(2)Actions  

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

就是说异步方法放入Actions,如ajax请求,求情获取到数据之后显示提交mutation里面的方法来改变state。

(3)Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。一条重要的原则就是要记住 mutation 必须是同步函数。组件中使用 this.$store.commit(‘xxx‘) 提交,在action里面使用commit(‘xxx‘) 提交。

(4)Getters

有时候我们需要从 store 中的 state 中派生出一些状态,Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数:

技术分享图片

Getters 会暴露为 store.getters 对象供调用。

技术分享图片

(5)Modules

简单点说就是为了方便操作和管理,模块化。

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

最后上几张图方便查看具体写法:

  技术分享图片

 

技术分享图片

以上是关于从零开始系列之vue全家桶安装使用vuex的主要内容,如果未能解决你的问题,请参考以下文章

从零开始系列之vue全家桶安装调试插件vue Devtools

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目实战系列之二)

vue全家桶(Vue+Vue-router+Vuex+axios)(Vue+webpack项目)

实战Vue全家桶(vue + axios + vue-router + vuex)搭建移动端H5项目

vue 全家桶介绍