vuex4的简单使用
简单 使用
2023-09-27 14:22:17 时间
安装vuex
cnpm install vuex@next --save
官网地址是 https://vuex.vuejs.org/zh/guide/#%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84-store
vuex中的常用5个模块
vuex模块常见有这几个
1.state 存放数据的
2.getters 相当于计算属性
3.mutations 改变state的值(同步), 在页面中通过store.commit('updateMenus', '值') 触发 mutations中的方法。进而更改state中的数据
4.actions 异步操作,在页面中通过 store.dispatch('setTestName')来触发actions 中的方法。在actions中通过 commit('updateTestName', '我是张三')来修改state 中的值
5.modules 模块,内容较多的时候,可以进行模块的拆分
ps:改变state中的数据,无论是同步还是异步。只能够通过mutations 中的方法去更改。不可以直接通过srore.state这样的方式去更改。
简单使用vuex store/index.ts文件
在src下创建store文夹,在store文夹下创建index.ts.
import { createStore } from 'vuex'
const store = createStore({
state() {
return {
// 通过存在localStorage中避免刷新的时候数据丢失
menus: localStorage.getItem('menus') ? localStorage.getItem('menu') : [],
testName: localStorage.getItem('testName') ? localStorage.getItem('testName') : '',
}
},
getters: {
// 计算属性
get_testName(state) {
return state.testName
}
},
mutations: {
updateMenus(state, menu) {
// @ts-ignore
localStorage.setItem('menus',JSON.stringify(menu))
state.menus=menu
},
updateTestName(state, testName) {
// @ts-ignore
localStorage.setItem('testName',testName)
state.testName=testName
}
},
actions: {
// 调用
setTestName({ commit }) {
return new Promise((resolve, reject) => {
// 模拟的一个请求,通过commit触发mutations中的 updateMenus
setTimeout(() => {
commit('updateTestName', '我是张三')
// 成功resolve返回数据
resolve('我是张三')
}, 1000);
})
}
},
modules:{}
})
export default store
在main.ts中注册
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { initRouter } from './router/index'
import store from './store/index' //新增
let app=createApp(App)
initRouter(app)
app.mount('#app')
app.use(store) //新增
3种获取值的形式
<template>
<div>
后台首页
<p>第1种:方式获取store.state点的形式:姓名-{{ shwoName1 }}</p>
<p>第2种:getters也没有跟新:姓名-{{ shwoName2 }}</p>
<p>第3种:computed跟新:姓名-{{ shwoName3 }}</p>
<el-button @click="handler">跟新了值</el-button>
</div>
</template>
<script setup lang="ts">
import { computed } from '@vue/runtime-core'
import { useStore } from 'vuex'
let store = useStore()
// 第1种:store.state点的形式
let shwoName1 = store.state.testName
// 第2种:getters也没有跟新
let shwoName2 = store.getters.get_testName
// 第3种:computed跟新
let shwoName3 = computed(() => {
// return store.state.testName 或者如下
return store.getters.get_testName
})
const handler = () => {
store.dispatch('setTestName').then(res => {
console.log('返回来的值',res)
})
}
</script>
我推荐第三种方式computed去获取值
因为前面这两种只会执行一次。如果设置testName的值是一个异步操作。
肯定就获取不到最新的值了。
相关文章
- Remix 搭建与简单使用,并支持外部访问
- js-BootstrapValidator简单使用
- mysql5.7设置简单密码报错ERROR 1819 (HY000): Your password does not satisfy the current policy requirements
- shiro的使用1 简单的认证
- elastic -job 快速入门简单程序
- vue中sync的使用原来这么简单
- JSON解析工具——fastjson的简单使用
- Spring Boot中使用Spring-data-jpa让数据访问更简单、更优雅
- SimpleDateFormat.format的简单使用小结
- iOS 多线程之GCD的简单使用
- 【记录】Keras中 两种常见的 深度学习模型:Sequential(序列模型) 和 Model(通用模型)|| 介绍 & 简单应用
- iOS中 超简单抽屉效果(MMDrawerController)的实现
- 设计模式----------工厂模式之简单工厂模式(创建型)
- 我去,requests使用pytest进行单元测试尽然怎么简单?
- 全新UI任务悬赏抢单源码-附带简单安装教程
- 刚入行python学爬虫简单吗?
- 最简单的视音频播放示例1:总述
- Android新特性之CardView的简单使用
- SpringMVC(一):SpringMVC的简单介绍
- Go语言建立一个最简单的服务端点
- 简单学JAVA-Java学习方法-JavaSE阶段
- HashSet的实现原理,简单易懂
- 简单介绍在 Linux 上创建和使用交换文件的方法
- 【FFMpeg视频开发与应用基础】一、使用FFmpeg命令行工具和批处理脚本进行简单的音视频文件编辑
- CxImage 简单配置与使用