摘要:本篇文章主要讲述JavaScript之vuex与vue有的关系,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
本篇文章主要讲述JavaScript之vuex与vue有的关系,希望阅读本篇文章以后大家有所收获,帮助大家对相关内容的理解更加深入。
vuex是什么
Vuex 是为vue.js开发提供的状态管理工具。在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。
vuex的安装与使用
1.使用npm安装Vuex
npm i vuex -s
2. 在项目的根目录下新增一个store文件夹,在该文件夹内创建index.js; 目录结构如下:
│ App.vue
│ main.js
│
├─assets
│ logo.png
│
├─components
│ HelloWorld.vue
│
├─router
│ index.js
│
└─store
index.js
3.初始化store文件夹下index.js内容
import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)
//创建VueX对象
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
name:'helloVueX'
}
})
export default store
4.将store挂载到当前项目的Vue实例当中去(注:main.js文件中添加如下内容)
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, //store:store 和router一样,将我们创建的Vuex实例挂载到这个vue实例中
render: h => h(App)
})
5.在组件中使用vuex
<template>
<div id='app'>
name:
<h1>{{ $store.state.name }}</h1>
</div>
</template>
什么情况下我应该使用 Vuex
Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。一个简单的 store 模式就足够您所需了。但是,如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
vue与vuex的关系
首先vue是一个前端框架,vuex只是vue的一个插件,官网说vuex是状态管理工具,其实说白了,vuex就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器,就是说来存放处理公共数据的工具,存放的数据一变,各个组件都会更新,也就是说存放的数据是响应式的。
总结
通过对vuex的简单介绍,想必大家对vuex以及vuex的使用有更深的了解。
关注“职坐标在线”公众号,免费获取最新技术干货教程资源哦!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号