vuex 学习

灰太狼 2023-10-12 08:51 47阅读 0赞

怎么理解呢？反正vuex是一个状态管理器，用来管理全局的组件状态，比如有很多个组件都会修改同一个数据，同时这个数据又要在多个组件上同时显示，这个时候用 vuex 来统一管理这些组件的状态，会让逻辑更清晰，更可维护。

我的理解：就是当一个数据被多个组件同时公用时。我才会把数据存入vuex中。

**目录**

1.在组件中去使用vuex

2.获取、修改state的值。

3.获取getter获取state值(计算属性)

4.异步请求修改数据

5.分模块化设计

--------------------

## 1.在组件中去使用vuex ##

单纯配置来说，和vue-router相似。

这里面的以参数只能留给state(公共数据)

**包结构**

![103e1df4400b4e1486178cac96795ac0.png][]

index.js文件

import Vue from "vue"
    import Vuex from "vuex"
    
    Vue.use(Vuex)
    
     const store = new Vuex.Store({
        state:{ // 公共数据
          
        },
        mutations:{ // 用来修改state和getters的数据
        },
        getters: { // 计算属性
    
         },
         actions: { // 发起异步请求
    
          },
          modules:{ // 拆分模块
    
          }
    
    })
    export default store;

vue实例注入store对象

import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    import store from "@/store"
    
    Vue.config.productionTip = false
    
    new Vue({
      store,
      router,
      render: h => h(App)
    }).$mount('#app')

## 2.获取、修改state的值。 ##

跟router有异曲同工之妙

**this.$store.state.属性名** 来获取值。

修改的话，调用mutations的方法修改

index.js文件

state:{ // 公共数据
           num:10,
        },
        mutations:{ // 用来修改state和getters的数据
            // 对应的事件，卧槽,state对应的就是上面的state,但是newValue是你自己传过来的。
            setNum(state,newVal){
                state.num = newVal
            }
        },

通过**this.$store.commit.("mutations事件名",修改的值)**

<template>
       <div>
        <h2>{
       { this.$store.state.num }}</h2>
        <button @click="modify">点我修改</button>
       </div>
    </template>
    
    <script>
    export default {
       methods:{
        // 修改
        modify(){
    // 参数1，modutains中的事件名，20就对应你要修改的参数了。
             this.$store.commit("setNum",20)
        }
       }
    }
    </script>

## 3.获取getter获取state值(计算属性) ##

反正，总感觉挺没用的！！

this.$store.getters.方法名

getters: { // 计算属性
           tenNum(state){
            return state.num * 10
           }
         },

add(){
           this.num =  this.$store.getters.tenNum
        }

## 4.异步请求修改数据 ##

**通过this.$store.dispatch('action名', 参数),修改数据**

这个**actions**请求数据一定要和**mutaions**中的方法绑定。

![6df354c54948435a85642e66bdc4e0eb.png][]

const mutations = { // 修改state值,同步执行刷新页面
        updateUser(state,user){
            state.user = user
        }
    }
    
    const actions = { // 修改state值，异步执行不刷新页面
        asyncUpdateUser(context,user){
         // 1.发异步请求,请求数据
         // 2.commit调用mutation 来修改数据
    
            context.commit("updateUser",user)
        }
    }

## 5.分模块化设计 ##

**包结构**

![f8a0aece70cb4ae6aab1d53ac8bca585.png][]

将之前写在store中Index.js文件抽出来，(你没设置一个**state对象**，都需要设置一系列**修改(mutaions、actions)**、**获取(getters)**)，一旦需要公用的对象变多，就很乱。因此我们将抽出来。

user.js

const user = {
    
        // 我们这个数据，就是存储一个公共数据，任何组件中都能修改获取他。但由于是存储到内存中，因此要做持久化处理。
     state : {
            user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{}
        },
    
     getters :{ // 获取state值
        getUser(state){
            return state.user;
        }
    },
    
     mutations :{ // 修改state值,同步执行刷新页面
        updateUser(state,user){
            state.user = user
        }
    },
    
     actions : { // 修改state值，异步执行不刷新页面
        asyncUpdateUser(context,user){
         // 1.发异步请求,请求数据
         // 2.commit调用mutation 来修改数据
    
            context.commit("updateUser",user)
        }
    }
    }
    
    export default user;

index.js

import Vue from "vue"
    import Vuex from "vuex"
    // vuex模块
    import user from "../store/module/user.js"
    
    Vue.use(Vuex)
    
    
    
    
    const store = new Vuex.Store({
        // 模块引入
        modules:{
            user
        }
    })
    
    
    export default store

使用方法不变。

[103e1df4400b4e1486178cac96795ac0.png]: https://img-blog.csdnimg.cn/103e1df4400b4e1486178cac96795ac0.png
[6df354c54948435a85642e66bdc4e0eb.png]: https://img-blog.csdnimg.cn/6df354c54948435a85642e66bdc4e0eb.png
[f8a0aece70cb4ae6aab1d53ac8bca585.png]: https://img-blog.csdnimg.cn/f8a0aece70cb4ae6aab1d53ac8bca585.png