一、 vuex的安装与引入

这里呢，主要就三种安装方式

1、官网直接下载

官网地址 https://vuex.vuejs.org/zh/ 

下载完成后，引入即可

2、npm安装

//在对应文件夹下的cmd中输入下行即可，或编辑器终端中输入
npm install vuex --save

3、yarn安装

//在对应文件夹下的cmd输入下行即可，或在编辑器终端中输入
yarn add vuex

以上两种方式需要进行人为引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

二、 vuex的五大核心概念

1、state

它是一个单一状态树，用一个对象就包含了所有的应用层级状态。

或者说它就是vuex的基本数据，用来存储数据变量。

state: {count: 0；}

2、getters

就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

 getters: {countx: function(state){return state.count * 2},countDouble: function(state, getters) {return getters.countx* 2}}

3、mutation

提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

  mutations: {//无参inxxz(state) {state.count++}//含参inxxxz(state, obj) {state.count += obj.n}}

4、action

和mutation的功能大致相同，不同之处在于Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

actions: { inxxz (context) { setInterval(function(){ context.commit('inxxz') }, 1000) } 
}

5、modules

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！