this.$store.commit使用

原文来自:https://blog.csdn.net/wf00334814/article/details/84348654

父子组件间通信常使用props或$emit,对于平行组件之间该方法较麻烦,不利于代码复用,因此使用this.$store.commit

(1)安装vuex

(2)可创建一个store文件夹,专门存放相关文件

(3)新建index.js文件

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

const store=new Vuex.Store({

state:{

text:{tip:"这是一条数据!"}

},

mutations:{//对state进行修改

modify(state,msg){

state.text.tip="修改数据!"

}

}

})

(4)挂载到实例上,注册

import store from '@/store/index.js'

new Vue({

store,

router

}).$mount("#app")

(5)在组件中使用

this.$store.commit('modify',"改变值!")

let value=this.$store.state.text.tip

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,964评论 0 7
  • rljs by sennchi Timeline of History Part One The Cognitiv...
    sennchi阅读 7,449评论 0 10
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 397评论 0 0
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 740评论 0 3
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,153评论 0 6