vuex有什么用?

vuex是什么?有什么用?下面本篇文章给大家介绍一下。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

vuex是什么?有什么用?

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。

vuex有这么几个核心概念——State、Getter、Mutation、Action、Module。

vuex的“hello world”示例

由于数据状态在多个组件维护的困难性,vuex在维护数据状态的时候,使用的方法就是对一个“容器”进行维护。这个容器是一个状态数,用对象的方式来表示。

(1)、store

const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
                state.count++
            },
            decrement (state) {
                state.count--
            }
        }
    })

store是vuex的核心对象,它记录了整个vue应用的数据状态以及操作数据的方式。

(2)、state

state就是store操作的数据状态对象。

(3)、mutation

mutation提供了一种简单易用的同步的方式改变state的状态。

完整示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>vuex学习</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <script src="https://unpkg.com/vuex"></script>
</head>
<body>
<div id="app">
    <p>{{ count }}</p>
    <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
    </p>
</div>
</body>
<script>
    const store = new Vuex.Store({
        state: {
            count: 0
        },
        mutations: {
            increment (state) {
                state.count++
            },
            decrement (state) {
                state.count--
            }
        }
    })
    new Vue({
        el:'#app',
        store,
        computed:{
            count(){
                return store.state.count;
            }
        },
        methods:{
            increment(){
                store.commit('increment')
            },
            decrement () {
                store.commit('decrement')
            }
        }
    })
</script>
</html>

更多web前端知识,请查阅 HTML中文网 !!

以上就是vuex有什么用?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏