首页 > 其他分享> 文章详细

vuex-基本使用

2022-07-02 14:31:58 阅读：172 来源： 互联网

标签：基本 getters mutations state 模块使用 vuex store

什么是 VUEX

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

简单理解：Vuex 就是一个存放着一些公共方法、数据的一个容器。不管在哪个组件里都可以使用它里面的东西。

下载

方法一

通过脚手架安装

方法二

通过 npm 安装

npm install vuex@next --save

配置

(如果是通过脚手架安装的 vuex 可以省略此步骤)

在 src 目录下新建 store -> index.js 文件。
在 index.js 里导入 VUE 和 VUEX，然后将 vuex 挂载到 vue上。
初始化 vuex。
在 main.js 中引入 store -> index.js 并挂载到 vue 上。

初始化 vuex：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state:{
    },
    getters:{
    },
    mutations:{
    },
    actions:{
    },
    modules:{
    }
})

基本使用

state

提供唯一的公共数据源，类似于 data，在 vuex 的 state 里定义的数据可以在任何组件里使用。使用的时候可以通过 this.$store.state.xxx 的方式使用。

getters

类似于 vue 中的计算属性。

使用的时候通过 this.$store.getters.xxx 的方式使用。

mutations

改变 state 里的数据的唯一方法就是通过 mutations，mutations 里会定义一些同步方法。

mutations 里的每个方法的第一个参数会接收 state，从第二个参数开始才是用户传递的参数。

使用的时候是通过 this.$store.commit('xxx', 参数) 的方式使用。

actions

与 mutations 非常相似，里面会进行一些异步的操作。

使用的时候通过 this.$store.dispath('xxx', 参数) 的方式使用。

modules

可以将 store 分成模块，每个模块都有自己的 state、getters、mutations、actions，甚至可以嵌套子模块。如果希望模块能有更高的复用性和封装度，那么可以通过添加 namespaced:true 的方式使其变成带命名空间的模块。模块被注册后它的所有 getters、actions 以及 mutations 都会自动根据模块注册的路径调整命名。

模块里的 mutations 是通过 this.$store.commit('模块名/mutation') 的方式使用的。

模块里的 actions 是通过 this.$store.dispatch('模块名/action') 的方式使用的。

模块里的 getters 是通过 this.$store.getters['模块名/getter'] 的方式使用的。

标签：基本,getters,mutations,state,模块,使用,vuex,store
来源： https://www.cnblogs.com/0529qhy/p/16437523.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9