8_vuex全局状态管理

一、vuex状态管理模式库

  • vuex 是一个专为 vue.js 应用程序开发的状态管理模式库
    • 状态: 响应式数据
  • 集中式存储管理应用的所有组件的状态
    • 存储在 store 中
  • 以相应的规则保证状态以一种可预测的方式发生变化
    • 不能直接修改store里面的数据,要使用预先定义的修改方式来修改

二、安装npm i vuex -S

npm install vue -S
npm install vuex -S
  • 修改vuex源码,复制了@vue/devtools-api文件夹到lib中
// 但是由于还没有学习构建工具,要修改源码vuex.esm-browser.js里面的导入
import { inject, reactive, watch } from './vue.esm-browser.js';
import { setupDevtoolsPlugin } from './devtools-api/lib/esm/index.js';

三、创建store

// 导入vue
import {createApp} from './lib/vue.esm-browser.js'
// 导入vuex
import {createStore} from './lib/vuex.esm-browser.js'

const  store = createStore({
  state(){
    return {
      tasks:[
        {name:'吃饭',completed:true,id:1},
        {name:'睡觉',completed:false,id:2},
        {name:'打小报告',completed:false,id:3},
        {name:'写代码',completed:true,id:4},
      ]
    }
  },
  mutations:{
    addTasks(state,payload){
      // state:store的state选项返回的数据集合
      // payload:你传递给addTask的实参
      // mutations里面的函数的调用方式: store.commit('函数名',实参)
      state.tasks.push(payload)
    }
  }
})

const app = createApp();
app.use(store)
// 插件安装以后
// 使用store里面的state:  任意vue实例.$store.state.tasks
// 调用store里面的mutations: 任意vue实例.$store.commit('addTasks',{name:'小小',completed:false,id:new Date().getTime()})
app.mount('#app')

四、选项

state共享状态

  • 函数,返回一个对象,定义组件共享的状态

mutations同步函数

  • 对象,里面定义多个函数,里面的代码是同步的,里面的函数通过 store.commit(函数名,payload) 提交

actions异步函数

  • 对象,里面定义多个函数,里面的代码一般是异步的,里面的函数通过 store.dispatch(函数名,payload) 调用

getters类似计算属性

  • 对象,类似计算属性,里面定义多个函数,函数的返回值就是获取到的值,依赖state里面的数据

modules模块

  • 对象,模块, 每个模块最好添加一个属性namespaced:true
    • 1 使用模块中的state: store.state.模块名.变量名
    • 2 使用模块中的getters: store.getters[‘模块名/变量名’]
    • 3 提交模块中的mutations: store.commit(‘模块名/函数名’,payload)
    • 4 调用模块中的actions: store.dispatch(‘模块名/函数名’,payload)

五、使用store

this.$store选项式api

useStore()组合式api

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值