Vuex（状态管理模式）

你的名字 2022-12-27 01:13 188阅读 0赞

Vuex：状态管理模式，它采用集中式存储管理应用的所有组件的状态，应用于多级或者多个界面共享，如 登录状态，用户名，头像，地理位置，收藏，购物车等  
项目结构  
1> 应用层级的状态应该集中到单个 store 对象中。  
2> 提交 mutation 是更改状态的唯一方法，并且这个过程是同步的。  
3> 异步逻辑都应该封装到 action 里面。

├── index.html
    ├── main.js
    ├── api
    │   └── ... # 抽取出API请求
    ├── components
    │   ├── App.vue
    │   └── ...
    └── store
        ├── index.js          # 我们组装模块并导出 store 的地方
        ├── actions.js        # 根级别的 action
        ├── mutations.js      # 根级别的 mutation
        └── modules
            ├── cart.js       # 购物车模块
            └── products.js   # 产品模块

安装：

npm install vuex --save

一、搭建Vuex框架  
1、安装插件

Vue.use(Vuex)

2、创建对象

const store = new Vuex.Store({ 
      state:{ 
      },
      mutations:{ 
      },
      action:{ 
      },
      getters:{ 
      }
    })

3、导出

export default store

4、再main.js中导入挂载

import Store from './store'
    import store from "./store";
    ......
    Vue.prototype.$store = store
    
    new Vue({ 
      render: h => h(App),
      Store,
    }).$mount('#app')

二、其他参数  
1、State：State单一状态树，Vuex的store中的state是响应式的，当state中的数据发生改变时，Vue组件会自动更新，其规则：(1)提前在  
2、Getter  
3、Mutation：传递参数（n个参数/对象），参数为Mutation的载荷，用于修改，其中方法必须为同步方法  
4、Action  
5、Module

发表评论取消回复

表情：

评论列表（有 0 条评论，188人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vuex（状态管理模式）

Vuex：状态管理模式，它采用集中式存储管理应用的所有组件的状态，应用于多级或者多个界面共享，如登录状态，用户名，头像，地理位置，收藏，购物车等项目结构 1> 应用

你的名字/ 2022年12月27日 01:13/ 0 赞/ 189 阅读

相关 uniapp Vuex 状态管理模式基本使用

一、uniapp 引入定义挂载Vuex 1、在根目录下建立store目录创建index.js文件 ![创建store目录][store] 代码如下 i

绝地灬酷狼/ 2022年12月12日 13:44/ 0 赞/ 425 阅读

相关 vuex状态管理

座右铭：越努力越幸运，越运动越健康。热爱前端技术，热爱运动的这样一个人文章目录一、vuex是什么? 二、状态管理

一时失言乱红尘/ 2022年12月03日 08:56/ 0 赞/ 241 阅读

相关 vuex 状态管理

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

小鱼儿/ 2022年12月02日 01:05/ 0 赞/ 288 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

朴灿烈づ我的快乐病毒、/ 2022年11月19日 11:28/ 0 赞/ 218 阅读

相关 Vuex状态管理（四）

Vuex详解认识Vuex Vuex是做什么的？官方解释：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集

悠悠/ 2022年11月19日 11:27/ 0 赞/ 255 阅读

相关 Vuex 状态管理模式

Vuex 核心概念使用 Vuex store State Getter Mutation

缺乏、安全感/ 2022年05月18日 03:09/ 0 赞/ 288 阅读

相关 Vue之Vuex(状态管理模式)

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

怼烎@/ 2022年04月18日 00:46/ 0 赞/ 259 阅读

相关 vuex状态管理模式架构

vuex的原理： > Vuex 全局维护着一个对象，使用到了单例设计模式。在这个全局对象中，所有属性都是响应式的，任意属性进行了改变，都会造成使用到该属性的组件进行更新。

川长思鸟来/ 2022年01月31日 17:39/ 0 赞/ 296 阅读

相关 Vuex状态管理总结

一、什么是 Vuex 1、Vuex 是一个专为 Vue.js 应用程序开发的[状态管理模式][Link 1] 2、Vuex 采用集中式存储和管理应用中所有组件的状态

﹏ヽ暗。殇╰゛Y/ 2021年11月05日 12:56/ 0 赞/ 432 阅读