vuex的知识点

一、vuex

概念

官网:Vuex 是什么? | Vuex (vuex3.x使用于vue2) Vuex 是什么? | Vuex ((vuex4.x 使用于vue3)

vuex是共享数据管理,和vue-router一样都是vue的核心插件之一(基本配置方式和vue-router相似)

vuex的思想大部分借鉴了react中的状态管理 redux(前身:flux)

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

使用场景

构建大型的单页面应用时,可能会考虑在组件外部进行更好的状态管理

很多组件都要用到这个共享状态时,那么这种情况我们就需要vuex,因为这种方法最简单

下载并使用

自主下载

npm  i  vuex@3
​
+ vuex@3.6.2

配置

在src 下创建 store/index.js

// 配置仓库
​
// 引入vue
import Vue from "vue"
// 引入vuex
import Vuex  from "vuex"
// 在vue中注入vuex
Vue.use(Vuex)
​
​
export default new Vuex.Store({
    state:{
        // 存储共享数据
    },
    getters:{
        // 对共享数据做一些处理:相当于计算属性
    },
    mutations:{
        // 方法,处理数据(把组件中传过来的数据进处理,重新设置给state)
    },
    actions:{
        // 方法,处理数据  介于mutations和组件之间的中间层
    }
})

在main.js中

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

使用:在组件中

{{$store}}
this.$store

脚手架下载

(*) Babel
( ) TypeScript
( ) Progressive Web App (PWA) Support
(*) Router
(*) Vuex
(*) CSS Pre-processors
( ) Linter / Formatter
( ) Unit Testing
( ) E2E Testing

核心属性 * * * *

1、state

单一的状态数据,唯一的数据源

export new Vuex.Store({
​
    state:{
        //这里定义所有状态管理数据 
        key:value
    }
​
})

使用:在组件中

{{$store.state}}
this.$store.state

2、mutations

修改state的唯一方式,只建议操作同步方法

视图:

<template>
    <div>
        
        <!--0、渲染仓库中的数据-->
        <!--4、更新仓库中的数据-->
        <h1>{{$store.state.msg}}</h1>
        
        <!-- 1、触发changemsg 函数-->
        <button @click="changemsg">修改msg</button>
    </div>
</template>
changemsg(){
    // console.log(this.$store);//commit 向仓库提交修改请求
    // 语法:this.$store.commit("突变类型",参数)
    // 2、触发AA突变事件
    this.$store.commit("AA","我不好")
}

仓库:

mutations: {
    // 书写习惯:mutations 和actions 用大写
    
    
    //3、AA被触发
    AA(state,payload){
        // console.log(state,"aa");
        // state.msg="你好世界" 
        
        //4、修改state中的数据
        state.msg=payload
    },
}

3、actions

语法和mutation一样

可以操作同步和异步

不能直接去修改state,因为修改state的唯一方式只能是mutation,action只能去提交给mutation

视图:

<template>
    <div>
         <!--0、渲染仓库中的数据-->
        <h1>{{$store.state.msg}}</h1>
        
          <!-- 1、触发changemsg 函数-->
        <button @click="changemsg">changemsg</button>
    </div>
</template>
​
changemsg() {
    // dispatch  派遣 到action
    // this.$store.dispatch("派遣事件",实参)
    
    //2、触发派遣事件BB
    this.$store.dispatch("BB","我也不好")
}

仓库:

actions:

 actions: {
     
     // 3、BB被触发
​
      BB({commit},payload){
​
        // console.log(state,"bb");
        // commit("突变事件",参数)  向mutation提交数据
          
         //4 、 触发突变CC事件  并传参
         commit("CC",payload)
      },
​
  },
 mutations: {
​
   // 5、CC被触发
    CC(state,payload){
      //  state.msg="你好世界" 
        
        //6、修改state中的数据
       state.msg=payload
    },
​
  },

4、getters

类似于计算属性,可以把大量的逻辑计算放置在getters中,当前的getters具有缓存的效果

我们一般会把他当做是state和视图的中间层

仓库:

​
export default new Vuex.Store({
    state:{
        
        // 1、先有数据
        users:[
              {
                id:1,
                username:"zs",
                userinfo:{
                  nickname:"张三",
                  realname:"李四"
                }
              }
          ]
    },
     getters: {
        // 当做计算属性使用
         getname(state){
            // 计算
            // return 计算的结果
            // 2、state中的数据通常是从数据库中请求过来的,数据结构比较复杂
            // 我们会先在getters中做一些处理在返回
​
            // return "赵四儿"
            return state.users[0].userinfo.nickname
​
            
         }
    },
    
})

视图:

​
<!-- 直接使用state -->
<h1>{{$store.state.users[0].userinfo.nickname}}</h1>
​
<!--使用getters处理好的数据-->
<h1>{{$store.getters.getname}}</h1>
​
<!--使用getters处理好的数据-->
 <h1>{{name}}</h1>
​
data(){
    return {
        name:""
    }
},
mounted() {
    // 在js中使用state和getters
    // this.name=this.$store.state.users[0].userinfo.nickname
    this.name=this.$store.getters.getname
​
},

5、modules

为了减少state属性的冗余问题,才出现modules模块的概念

当使用单一状态树时,应用的所有状态都会集中到一个比较大的对象上,当应用变的非常复杂的时候,store的对象就变的非常臃肿

所以,vuex允许我们将store切割成不同的模块,每一个模块中,都可以有自己的state、mutations、actions、getters,甚至是modules

modules:{
    moduleA:{
        state:{},
        mutations:{},
        actions:{},
        getters:{},
        modules:{}
    }
}

vuex和离线存储的区别

相同:可以实现数据共享

不同:

1、vuex是响应是的数据变化,当数据发生变化,所有引入这个数据的位置都会自动刷新(都会跟着变化)

2、离线存储中,没有响应式的机制,当数据发生变化,要重新刷新浏览器,应用的地方才会跟着改变

3、vuex不能数据持久化(不能存储),一刷新就会就会回到初始状态

4、离线存储可以实现数据持久化

总结:真正做项目的过程中,就是要结合使用,离线存储要和vuex共同使用

辅助性函数

目的:让代码尽可能的简洁(想用就用,不想用就不用)

mapState

<template>
    <div>
        <h1>辅助性函数</h1>
        <h1>{{msg()}}</h1>
        <h1>{{msg1()}}</h1>
        <h1>{{msg2()}}</h1>
        <h1>{{msg3()}}</h1>
        <h1>{{msg4()}}</h1>
    </div>
  
</template>
  
import {mapState,mapMutations,mapActions,mapGetters} from "vuex"
​
export default {
    data() {
        return {
            // 展开参数
            ...mapState(["msg","msg1","msg2","msg3","msg4"])
​
            // msg: ƒ, msg1: ƒ, msg2: ƒ, msg3: ƒ, msg4: ƒ
        }
    }
​
}
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值