vuex中计算属性来代理state数据

Myth丶恋晨 2021-09-02 10:01 386阅读 0赞

<div id="app">
    		
    		
    
    
    		
    		<input type="text" v-model="dealMsg">
    		<home></home>
    	</div>
    
    
    // 引入vue
    import Vue from 'vue';
    
    // 引入vuex
    import Vuex, { Store } from 'vuex';
    
    // 安装
    Vue.use(Vuex);
    
    // 实例化
    let store = new Store({
    	// 数据
    	state: {
    		msg: 'hello'
    	},
    	// 同步消息
    	mutations: {
    		// 更新msg
    		updateMessage(state, msg) {
    			
    			state.msg = msg;
    		}
    	}
    })
    
    // 组件
    let Home = Vue.extend({
    	// 模板
    	template: '<h1>result: {
       {$store.state.msg}}</h1>'
    })
    
    // vue实例化对象
    new Vue({
    	// 注册store
    	store,
    	// 组件
    	components: { Home },
    	// 容器
    	el: '#app',
    	// 数据
    	// data中存储数据，在使用前，或者修改前，无法改变
    	data: {},
    	// 计算属性数据
    	computed: {
    		// 定义特性方法来代理store中的state数据
    		dealMsg: {
    			// 修改数据
    			set(value) {
    				
    				// 发布mutation消息，与state同步
    				this.$store.commit('updateMessage', value)
    			},
    			// 获取数据
    			get() {
    				
    				// 获取state数据
    				return this.$store.state.msg;
    			}
    		}
    	}
    })

发表评论取消回复

表情：

评论列表（有 0 条评论，386人围观）

还没有评论，来说两句吧...

相关阅读

相关 vuex中的state

vuex中的state 简介本文讲解vuex中的state使用方法。入门讲解首先第一步肯定是创建vue项目，具体操作看这篇文章：[用命令窗口的方式创建

小鱼儿/ 2024年03月16日 13:35/ 0 赞/ 37 阅读

相关 vuex中直接修改state 与 commit来修改state的区别

背景当我们使用vuex进行状态管理的时候，我们总是会看到一句话`更改Vuex 的store 中的状态的唯一方法是提交commit`zongz，那么我们不提交`commi

迷南。/ 2022年10月10日 01:27/ 0 赞/ 231 阅读

相关 vuex 和ajax,vue + vuex+ajax，数据没有保存到state里面

vue发送ajax请求到的数据没有保存在vuex的 state里面好像是...在请求的过程中数据保存了，请求结束，数据又不见了代码如下 data() \{ retu

落日映苍穹つ/ 2022年09月03日 11:19/ 0 赞/ 172 阅读

相关 vuex改变state数据状态

最好不要直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得可以方便地跟踪每一个状态的变化，从而能够

ゝ一纸荒年。/ 2022年04月17日 05:18/ 0 赞/ 296 阅读

相关 vuex中的state和mapState

vuex是Vue中的数据仓库，用来存储数据的，Vue中每个组件都可以获取和修改vuex中的值。 1. 添加vuex插件 ![20190325231235950.png][]

梦里梦外;/ 2022年02月28日 14:56/ 0 赞/ 385 阅读

相关 Vuex中store对象的4个属性state，Mutations，Getters，action

一、State Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。

素颜马尾好姑娘i/ 2021年10月15日 06:36/ 0 赞/ 733 阅读

相关 vuex重置所有state

在正式场景中我们经常遇到一个问题，就是登出页面或其他操作的时候，我们需要重置所有的vuex，让其变为初始状态，那么，就涉及到了多种方法： 1、页面刷新：

我会带着你远行/ 2021年09月03日 03:39/ 0 赞/ 412 阅读

相关 vuex中计算属性来代理state数据

<div id="app">  <!-- <input ty

Myth丶恋晨/ 2021年09月02日 10:01/ 0 赞/ 386 阅读

相关 Vuex笔记（三）——state

在Vuex中，我们会发现所有的状态都包含在了一个对象state中。即Vuex使用单一状态树。那我们在Vue组件中获取和展示状态的方法，在上一个笔记里已经有写过：

本是古典何须时尚/ 2021年08月13日 12:52/ 0 赞/ 464 阅读

相关 vuex getters计算属性

export default new Vuex.Store({ 计算属性用于对state中的数据进行计算

短命女/ 2021年07月24日 11:05/ 0 赞/ 452 阅读