本文共 3611 字，大约阅读时间需要 12 分钟。

Vuex简介

官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓库），

让其在各个页面上实现数据的共享包括状态，并且可操作

Vuex分成五个部分：

2.Getters：状态获取

3.Mutations：触发同步事件

4.Actions：提交mutation，可以包含异步操作

5.Module：将vuex进行分模块

vuex使用步骤

安装

在命令窗口输入以下代码

storeindex.jsstate.jsactions.jsmutations.jsgetters.js

文件目录

import Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getters'import actions from './actions'import mutations from './mutations'Vue.use(Vuex)const store = new Vuex.Store({ 	state, 	getters, 	actions, 	mutations }) export default store

在main.js中导入并使用store实例

import store from './store'

具体代码

// The Vue build version to load with the `import` command// (runtime-only or standalone) has been set in webpack.base.conf with an alias.import Vue from 'vue'import 'element-ui/lib/theme-chalk/index.css'/* process.env.MOCK && require('@/mock') */import App from './App'import router from './router'import store from './store'import ElementUI from 'element-ui'import axios from '@/api/http' import VueAxios from 'vue-axios'Vue.use(ElementUI) Vue.use(VueAxios,axios)Vue.config.productionTip = false/* eslint-disable no-new */new Vue({	el: '#app',	data(){		return {			Bus:new Vue({							})		}	},	router,	store,	components: {		App	},	template: '
   '})

vuex的核心概念：store、state、getters、mutations、actions

store

每一个Vuex应用的核心就是store(仓库),store基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。  const store = new Vuex.Store({   state,    // 共同维护的一个状态，state里面可以是很多个全局状态   getters,  // 获取数据并渲染   actions,  // 数据的异步操作   mutations  // 处理数据的唯一途径，state的改变或赋值只能在这里  })

state(保存数据的容器)

状态，即要全局读写的数据

export default {	resturantName: '猪肉餐馆'}

getters(getXxx)

获取数据并渲染，

export default {	getResturantName: (state) => {		return state.resturantName;	}}

getters将state中定义的值暴露在this.$store.getters对象中，我们可以通过如下代码访问

this.$store.getters.resturantName

mutations(setXxx)

处理数据的唯一途径，state的改变或赋值只能在这里

export default {	setResturantName: (state, payload) => {		state.resturantName = payload.resturantName;	}}

mutations中方法的调用方式

不能直接调用this.$store.mutations.setResturantName('KFC')，必须使用如下方式调用：   this.$store.commit(type,payload);   // 1、把载荷和type分开提交   store.commit('setResturantName',{     resturantName:'KFC'   })

actions

数据的异步(async)操作  如何理解javascript中的异步和同步？附录四：同步和异步的示例代码

demo

VuexPage1.vue

VuexPage2.vue

actions.js

export default {	setResturantNameAsync: (contex, payload) => {		console.log('xxxx')		setTimeout(() => {			console.log('aaa')			contex.commit('setResturantName', payload);		}, 4000)		console.log('bbb')	},	doAjax: (contex, payload) => {		//vuex是不能使用Vue实例的		let _this = payload._this;		let url = _this.axios.urls.SYSTEM_USER_DOLOGIN;		//get请求		_this.axios.get(url, {}).then((response) => { //成功的回调函数			console.log('ajax-------')			console.log(response);		}).catch((response) => { //失败的回调函数(异常)			console.log(response);		});	}}

getters.js

export default {	getResturantName: (state) => {		return state.resturantName;	}}

index.js

import Vue from 'vue'import Vuex from 'vuex'import state from './state'import getters from './getters'import actions from './actions'import mutations from './mutations'Vue.use(Vuex)const store = new Vuex.Store({ 	state, 	getters, 	actions, 	mutations }) export default store

mutations.js

export default {	setResturantName: (state, payload) => {		state.resturantName = payload.resturantName;	}}

state.js

export default {	resturantName: '猪肉餐馆'	}

转载地址：https://blog.csdn.net/shaobina/article/details/100568981 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！