首页 > 其他 > 详细

part7 vuex实现数据共享

时间:2020-02-15 16:14:23      阅读:52      评论:0      收藏:0      [点我收藏+]

vuex 是数据框架(一个插件)(单项数据的改变流程,组件改数据必须先调Action用dispatch方法)

 大型项目vue只能承担视图层的主要内容 

大量数据传递的时候,往往需要一个数据框架辅助

例子:多个组件之间的传值很困难的时候,如果我们能吧公用的数据放在一个公共的空间

存储,然后某一个组件改变了数据,其他组件能够感知

start

1.因为vuex做的文件还是比较复杂的,所以我们先创建一个单独的文件夹

/src/store/index.js

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

export default  new Vuex.store({})

2.然后在main.js中引入,便可在所有组件中使用

import store from ‘‘./store"

new Vue({
    store,    //传进根实例
})

3.组件中使用

{{this.$store.state.city}}

4.组件中改变数据

首先组件中调用VUEX中的Actions 用 dispatch方法

然后actions调用Mutations用commit方法

this.$store.dispatch(‘changeCity‘, city)  //city为数据 ,派发一个名字叫changCity这样一个Action
//Action需要写在 Store中
export defalut new Store({
   state: {}
   action: {
   chageCity (ctx, city) {} 
   ctx.commit(‘chageCity‘, city)   //ctx为执行上下文
}  
   mutations: {
    changeCity(‘state‘,‘city‘) {
      state.city = city
}
} 
})

当数据比较简答的时候 可以直接调用mutations

this.$store.commit(‘changeCity‘, city)

页面跳转方法

1.a标签

<router-link to="/"> </router-link>

 

2.js window.location.href

this.$router.push(‘/‘)

 

part7 vuex实现数据共享

原文:https://www.cnblogs.com/-constructor/p/12312171.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!