Vue学习笔记之状态管理

2023-12-13 04:57:42

第八章 vuex状态管理

8.1 Vuex介绍

  • Vuex是一个专门为Vue.js应用程序开发的状态管理模式,将组件之间共享的数据(状态)放置在一个单独的容器(store)中

    • 可以看作一个加强版的data,一个全局的data属性,便于处理大量的需要在组件间传递的数据
    • 页面比较简单则最好不引入Vuex
    • Vuex也是响应式
  • 什么情况下使用Vuex管理状态在多个组件间共享

    • 大型项目组件很多,多个组件共用数据

      例如:

      • 用户的登录状态、用户名称、头像、地理位置信息
      • 商品的收藏、购物车中的物品

8.2 Vuex使用

  • 安装vuex

  • 直接在项目入口文件(index.js)中创建一个Vuex store实例或引入一个实例:

    import store from './store'
    
  • 在 store->index.js中创建Vuex store实例并进行导出

    import { createStore } from 'vuex'
    
    export default createStore({
      state: {
          //定义初始状态,该状态可以直接使用
          count:0;
      },
      getters: {
          //定义一个getter来计算派生状态,类似组件的计算属性
          countpow(state){
              return state.count*state.count;
          }
      },
      mutations: {
          //定义一个mutation来修改状态
          mu_add(state){
              state.count++;
          },
          mu_sub(state){
              state.count--;
          }
      },
      actions: {
          //定义一个action来触发mutation,用于处理异步操作或包含复杂逻辑的操作,并可以触发对应的mutations来修改状态
          ac_sub({state,commit,getters},payload){
              commit('mu_sub',payload);
          }
      },
      modules: {
          //可以将store分割成多个模块,每个模块拥有自己的state,mutations,actions,getters
      }
    })
    
  • 在Vue组件中使用store: 这就是一个全局变量,在需要访问和修改状态的组件中,程序通过this.$store来访问Vuex store,在模板中不需要添加this

    export default{
        computed: {
            count(){
                return this.$store.state.count;//访问状态
            }
        },
        method:{
            sub(){
                //this.$store.state.count--;
                //使用mutation
                this.$store.commit('mu_sub')
                //使用actions
                this.$store.dispatch('ac_sub',param)
            }
        }
    }
    
    {{$store.state.count}}<br>
    <button @click="$store.state.count++">
        +
    </button><br>
    <button @click="sub()">
        -
    </button>
    使用全局的计算属性
    {{$store.getter.countpow}}<br>
    
    使用mutations
    <button @click="$store.commit('mu_add')">
        +
    </button>
    
    
  • 使用 $store.commit() dispatch()等方法后,后续可以跟要传给mutation的参数,只接收一个参数,多个参数需要封装成一个的对象才能被接收

  • 模块化:可以把store中的每个属性单独写成一个js文件,在index.js中导入即可,方便直接在每个相应文件中删改变量数据

文章来源:https://blog.csdn.net/bfbshs_ddd/article/details/134802031
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。