vuex实现及简略解析(小结)

大家都知道

vuex

是

vue

的一个状态管理器，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。先看看

vuex

下面的工作流程图

通过官方文档提供的流程图我们知道，

vuex

的工作流程，

1、数据从

state

中渲染到页面；

2、在页面通过

dispatch

来触发

action

；

3、

action

通过调用

commit

,来触发

mutation

；

4、

mutation

来更改数据，数据变更之后会触发

dep

对象的

notify

，通知所有

Watcher

对象去修改对应视图（vue的双向数据绑定原理）。

使用vuex

理解

vuex

的工作流程我们就看看

vuex

在

vue

中是怎么使用的。

首先用

vue-cli

创建一个项目工程，如下图，选择

vuex

，然后就是一路的回车键

安装好之后，就有一个带有

vuex

的

vue

项目了。

进入目录然后看到，

src/store.js

，在里面加了一个状态

{count: 100}

，如下

import Vue from 'vue'
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex) // 使用插件
export default new Vuex.Store({
 state: {
  count: 100 // 加一个状态
 },
 getter: {
 },
 mutations: {
 },
 actions: {
 }
})

最后在App.vue文件里面使用上这个状态，如下

<template>
 <div id="app">
  这里是stort------->{{this.$store.state.count}}
 </div>
</template>
<script>
export default {
 name: 'app'
}
</script>
<style>
</style>

项目跑起来就会看到页面上看到，页面上会有100了，如下图