vuex是什么?与vue的关系又是什么

2020-09-15 635 0 编辑:深圳网站建设 来源:互联网

Vuex 是为vue.js开发提供的状态管理工具。在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。

在项目的根目录下新增一个store文件夹,在该文件夹内创建index.js; 目录结构如下:

│  App.vue

│  main.js

├─assets

│      logo.png

├─components

│      HelloWorld.vue

├─router

│      index.js

└─store

       index.js

初始化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

将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)

})

在组件中使用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就是一个存放多个组件共用的一个数据的存放、更改、处理的一个容器,就是说来存放处理公共数据的工具,存放的数据一变,各个组件都会更新,也就是说存放的数据是响应式的。

深圳网站建设.png

本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5