首页 > 编程知识 正文

vuex的理解,vuex详解和用法

时间:2023-05-03 14:34:03 阅读:272701 作者:767

Vuex到底是什么

现在在学习写一个工程的时候看到很多样例都用到了vuex,那么vuex究竟是什么?

从官网上说, Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态.

这个其实蛮难看懂。于是作者做了如下例子来说明,分别用纯vue和vue+vuex进行说明。

需求是,一个数字,然后两个按钮+/-。

纯vue的实现是:

<script src="https://unpkg.com/vue/dist/vue.js"></script><div id="app"> <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p></div><script>new Vue({ el:'#app', data () { return { count: 0 } }, methods: { inc () { this.count++ }, dec () { this.count-- } }})</script>

vue+vuex的实现是:

<script src="https://unpkg.com/vue/dist/vue.js"></script><script src="https://unpkg.com/vuex@next"></script><div id="app"> <p>{{count}} <button @click="inc">+</button> <button @click="dec">-</button> </p></div><script>const store = new Vuex.Store({ state: { count: 0 }, mutations: { inc: state => state.count++, dec: state => state.count-- }})const app = new Vue({ el: '#app', computed: { count () { return store.state.count } }, methods: { inc () { store.commit('inc') }, dec () { store.commit('dec') } }})</script>

这里看到所有涉及到状态和计算都放到了store中,这样就可以在各个组件之间互相传递和共享了,解决了互相通讯的问题。

作者原文链接: 到底vuex是什么?

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。