uni-app中vuex的入门之道

对于vuex，网上已有许多教程，写下此文只是个人平时总结所需，大家看看就好，说不定还能有些收获。

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。（源于官网）
通俗理解：vuex是一种全局变量(数据)的状态管理模式，且易于维护和跟踪。

vue官网上的图，可以很好地理解事件流

事件流描述

-用户访问页面并触发action
-action提交mutation事件
-mutation事件更改state状态
-state状态改变后更新页面(vue components)

安装

uni-app已内置vuex模块（伸手党福利）。

使用

一、在项目的根目录下新建一个store文件夹，放入一个index.js文件

创建store仓库

二、在 main.js 中挂载 Vuex

//引入store
import store from './store'  
//将store挂载到Vue的原型链上
Vue.prototype.$store = store  

三、最后，在 pages/index/index.vue 使用

在组件页面中使用

四、效果

查看效果