最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > 工具与技巧> Vuex 知识点

Vuex 知识点

文章作者:网友投稿 发布时间:2019-06-22 17:45:01 来源:网络

Vuex 是一个 Vue.js 中的状态管理模式 (Vuex 相当于是 Vue 的数据管理仓库),它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变

Vuex 是一个 Vue.js 中的状态管理模式 (Vuex 相当于是 Vue 的数据管理仓库),它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。接下来小编就带大家一起学习吧!


1、vuex 的状态管理模式

   state : 管理状态(数据)

   vue conponents : 渲染状态,操作 action

   action :操作 mutation,可以执行异步方法

   mutation: 修改 state,只能执行同步方法


2、vuex 的特点

 1.  当单页应用项目较大时可以使用 vuex 来管理数据

 2. 当单页应用项使用vuex的核心概念目不大时,不建议使用 vuex,它会造成代码的繁琐冗余  


3、vuex 的使用

在项目的src目录下新建一个目录store,在该目录下新建一个index.js文件,我们用来创建vuex实例,然后在该文件中引入vue和vuex,创建Vuex.Store实例保存到变量store中,最后使用export default导出store:

vuex1.png

在main.js文件中引入该文件,在文件里面添加 import store from ‘./store’;,再在vue实例全局引入store对象;

vuex2.png

使用步骤:

1)安装

az.png

2)引入

yr.png

3)创建一个仓库

ck.png

4)注册到 vue 实例中

slvuex.png

4、vuex 的核心概念

vuexgn.png

state  存储状态

state.png

getters   相当于 vue 实例中的计算属性,可以用来对数据进行简单的操作,方法可复用

getters.png

mutations  修改状态 ,同步代码 

mutations.png

提交载荷:调用 mutation 方法时传入的参数

actions  调用 mutations,异步代码

actions.png


5、vuex在vue-cli中的应用

vuexcli.png


6、组件中使用 vuex 的值和修改值的地方?

vuexz.png


7、在vuex中使用异步修改

vuexyb.png

使用

vuexyb2.png


8、pc端页面刷新时实现vuex缓存

vuexhc.png

9、vuex 流程图

vuex.png


上一篇: Vue Router知识点

下一篇: 没有了

共有0条评论网友评论