当前位置:

vue里store的用法是什么意思

访客 2023-08-17 415 0

vue里store的用法是什么

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

每一个Vuex应用的核心就是store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态(state)。Vuex和单纯的全局对象有以下两点不同:

Vuex的状态存储是响应式的。当Vue组件从store中读取状态的时候,若store中的状态发生变化,那么相应的组件也会相应地得到高效更新。

你不能直接改变store中的状态。改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

store的核心概念

state表示了store中的状态,类似于vue实例中的data属性。

Mutation

更改Vuex的store中的状态的唯一方法是提交mutation。

Vuex中的mutation非常类似于事件:每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受state作为第一个参数

Action

Action类似于mutation,不同在于:

Action提交的是mutation,而不是直接变更状态。

Action可以包含任意异步操作。

一个示例

conststore=newVuex.Store({state:{count:0},mutations:{increment(state){state.count}},actions:{increment(context){context.commit('increment')}}})

store的用法

使用store之前,先要安装vuex:

npminstallvuex

安装Vuex之后,让我们来创建一个store。创建过程直截了当——仅需要提供一个初始state对象和一些mutation。

新建store文件夹,再新建index.js文件:

importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)exportdefaultnewVuex.Store({state:{count:0},mutations:{increment(state){state.count;}}})

为了在Vue组件中访问this.$storeproperty,你需要为Vue实例提供创建好的store。Vuex提供了一个从根组件向所有子组件,以store选项的方式“注入”该store的机制。

也就是在main.js文件中导入,并注册到vue根实例中:

importstorefrom'./store'...newVue({el:"#app",store:store,...

然后就可以在任意一个vue组件的methods方法属性下通过store.commit('increment')来调用:

...methods:{increment:function(){this.$store.commit("increment");console.log(this.$store.state.count);},...

效果如下:

发表评论

  • 评论列表
还没有人评论,快来抢沙发吧~