Vue学习记录（codewhy）——Vuex

想做合格的前端程序员

已于 2022-05-10 15:51:12 修改

阅读量961

点赞数

分类专栏： Vue 文章标签： vue

于 2022-05-10 15:43:22 首次发布

本文链接：https://blog.csdn.net/spring0205/article/details/124662274

版权

Vue 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

什么是Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式
采用集中式存储管理应用到所有组件的状态并以相应的规则保证状态以一种可预测的方式发生变化
状态管理是什么：
其实就是将需要多个组件共享的变量全部存储在一个对象里面然后将这个对象放在顶层的vue实例中让其他组件可以使用
和我们自己写的比起来有“响应式”的特点

Vues管理什么状态

需要在多个界面共享的问题
比如用户的登录状态、用户名称和地理位置信息等
比如商品的收藏、购物车中的物品等

Vuex单页面到多页面状态管理切换

想要让helloVuex组件使用app的counter 原做法是用父子组件通信
在这里插入图片描述

在vue3中配置并使用Vuex

1.在终端输入 npm install vuex --save
在这里插入图片描述
2.在src文件下创建store文件夹并在文件夹里创建index.js文件

3.index.js文件内书写代码

可复制版

import {createStore} from 'vuex'
export default createStore({
    state:{
        counter:1000              
    },
    mutations:{

    },
    actions:{

    },
    getters:{

    },
    modules:{
         
    }
})

4.在main.js中书写代码
在这里插入图片描述
用vuex写法

但是不建议对counter的更改也用 @click="$store.state.counter++这样的方法

因为vue官方建议经过actions、mutations再更改state 因为其中可以经过devtools工具进行记录counter的变化

而应该