Vue2向Vue3过度Vuex核心概念state状态

目录


1 核心概念 - state 状态

1.目标

明确如何给仓库 提供 数据,如何 使用 仓库的数据

2.提供数据

State提供唯一的公共数据源,所有共享的数据都要统一放到Store中的State中存储。

打开项目中的store.js文件,在state对象中可以添加我们要共享的数据。

jsx 复制代码
// 创建仓库 store
const store = new Vuex.Store({
  // state 状态, 即数据, 类似于vue组件中的data,
  // 区别:
  // 1.data 是组件自己的数据, 
  // 2.state 中的数据整个vue项目的组件都能访问到
  state: {
    count: 101
  }
})

3.访问Vuex中的数据

问题: 如何在组件中获取count?

  1. 通过store直接访问 ---\> {{ store.state.count }}
  2. 通过辅助函数mapState 映射计算属性 ---> {{ count }}

4.通过$store访问的语法

js 复制代码
获取 store:
 1.Vue模板中获取 this.$store
 2.js文件中获取 import 导入 store


模板中:     {{ $store.state.xxx }}
组件逻辑中:  this.$store.state.xxx
JS模块中:   store.state.xxx

5.代码实现

5.1模板中使用

组件中可以使用 $store 获取到vuex中的store对象实例,可通过state 属性属性获取count, 如下

vue 复制代码
<h1>state的数据 - {{ $store.state.count }}</h1>

5.2组件逻辑中使用

将state属性定义在计算属性中 https://vuex.vuejs.org/zh/guide/state.html

js 复制代码
<h1>state的数据 - {{ count }}</h1>

// 把state中数据,定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

5.3 js文件中使用

vue 复制代码
//main.js

import store from "@/store"

console.log(store.state.count)

每次都像这样一个个的提供计算属性, 太麻烦了,我们有没有简单的语法帮我们获取state中的值呢?

2 通过辅助函数 - mapState获取 state中的数据

mapState是辅助函数,帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便的用法

用法 :

1.第一步:导入mapState (mapState是vuex中的一个函数)

js 复制代码
import { mapState } from 'vuex'

2.第二步:采用数组形式引入state属性

js 复制代码
mapState(['count']) 

上面代码的最终得到的是 类似于

js 复制代码
count () {
    return this.$store.state.count
}

3.第三步:利用展开运算符将导出的状态映射给计算属性

js 复制代码
  computed: {
    ...mapState(['count'])
  }
vue 复制代码
 <div> state的数据:{{ count }}</div>

3 开启严格模式及Vuex的单项数据流

1.目标

明确 vuex 同样遵循单向数据流,组件中不能直接修改仓库的数据

2.直接在组件中修改Vuex中state的值

Son1.vue

vue 复制代码
button @click="handleAdd">值 + 1</button>


methods:{
	 handleAdd (n) {
      // 错误代码(vue默认不会监测,监测需要成本)
       this.$store.state.count++
      // console.log(this.$store.state.count) 
    },
}

3.开启严格模式

通过 strict: true 可以开启严格模式,开启严格模式后,直接修改state中的值会报错

state数据的修改只能通过mutations,并且mutations必须是同步的

相关推荐
青红光硫化黑2 分钟前
React-native之组件
javascript·react native·react.js
菠萝+冰4 分钟前
在 React 中,父子组件之间的通信(传参和传方法)
前端·javascript·react.js
庚云6 分钟前
一套代码如何同时适配移动端和pc端
前端
Jinuss7 分钟前
Vue3源码reactivity响应式篇Reflect和Proxy详解
前端·vue3
海天胜景16 分钟前
vue3 el-select 默认选中第一个
前端·javascript·vue.js
小小怪下士_---_35 分钟前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
前端W36 分钟前
腾讯地图组件使用说明文档
前端
页面魔术39 分钟前
无虚拟dom怎么又流行起来了?
前端·javascript·vue.js
胡gh39 分钟前
如何聊懒加载,只说个懒可不行
前端·react.js·面试