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

2022-05-06 00:38| 来源: 网络整理| 查看: 265

vuex实现及简略解析(小结),[db:关键字]

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

易采站长站，站长之家为您整理了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文件里面使用上这个状态，如下

这里是stort------->{{this.$store.state.count}}

export default { name: 'app'}

项目跑起来就会看到页面上看到，页面上会有100了，如下图以上就是关于对vuex实现及简略解析(小结)的详细介绍。欢迎大家对vuex实现及简略解析(小结)内容提出宝贵意见

1/8 1 2 3 4 5 6 下一页尾页

【本文地址】

今日新闻