首页 > 其他 > 详细

VueX

时间:2021-05-21 22:35:18      阅读:33      评论:0      收藏:0      [点我收藏+]

VueX

1、Vuex概述

VueX是什么

Vuex是一个专为vue.js应用程序开发的状态管理模式。他采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

重点

<!--
  Vuex其实就是vue页面组件数据共享的一种插件机制。
-->

2、使用VueX

创建项目

vue create 项目名

添加vue-router

vue add router

添加vuex

vue add vuex

运行项目

npm run serve

完成

项目初始化截图

技术分享图片

3、介绍VueX的属性

import Vue from ‘vue‘
/*1、导入vuex的模块*/
import Vuex from ‘vuex‘
/*注册vuex插件到vue中,这就是全局注册*/
Vue.use(Vuex)
/*开始给vuex中定义响应式全局数据共享对象this.$store*/
export default new Vuex.Store({
  /*定义响应式数据,类似data,区别是全局的*/
  state: {

  },
  /*改变state数据行为*/
  mutations: {

  },
  /*actions是处理异步数据加载和提交mutations的机制,间接改变state的数据。
  不能直接修改state中的数据,更改的方式通过commit(mutations定义的事件)*/
  actions: {

  },
  /*对状态state管理的一种过滤机制*/
  getters:{

  },
  /*模块化隔离的一种机制*/
  modules: {

  }
})

4、使用computed获取计算属性

1、改变state中的数据

直接改变

技术分享图片

技术分享图片

技术分享图片

间接改变

技术分享图片

技术分享图片

ES6

技术分享图片

VueX

原文:https://www.cnblogs.com/huxiaoan1/p/14797062.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!