使用vuex进行简单的数据传递(可以是实体类)

  • Post author:
  • Post category:vue



Vuex官网地址:https://vuex.vuejs.org/zh/guide/


这里只做简单的介绍和使用,复杂的使用情况,自己参照官网。



如果没有安装vuex ,通过命令行: npm install vuex –save 进行安装



然后在 main.js 中引入并在Vue实例中注入


import Vuex from ‘vuex’;


import store from ‘./

vuex

/store’


;


Vue.

use

(Vuex);


new Vue({ el: ‘#app’,store,…..还有其他的一些组件模板等)




构建核心仓库store.js



Vuex 应用的状态 state都应当存放在store.js 里面,Vue 组件可以从 store.js 里面获取状态,可以把 store 通俗的理解为一个全局变量的仓库。


但是和单纯的全局变量又有一些区别,主要体现在当 store 中的状态发生改变时,相应的 vue 组件也会得到高效更新。


在 src 目录下创建一个 vuex 目录,将 store.js 放到 store 目录下


store.js 中:


import Vuex from ‘vuex’


import Vue  from ‘vue’


Vue.use(Vuex)



/*




const


mutations

= {

    setId(state ,  id) {


state.id = id


}

}


也可以这样把它引到外面写,或者在里面和state一样的写法*/


export default new Vuex.Store({


state:{


id: ‘ ‘


},


mutations


})




传递方法:


A界面改变store中state里的参数:  this.$store.commit( ‘setId’ ,(要传递的参数id) )


B界面接收变化数据参数: this.$store.state.id


但是通过 vuex这样写,页面刷新之后,数据也会消失。它只是对变量提升。




如果不想数据刷新消失,就把数据存储到Local Storage或者Session Storage或者本地存储库中。


二.使用web storage进行数据传递


以Local Storage为例:


将id参数一’id‘ 这个name  存进localStorage


localStorage.setItem(‘id’ , id)


读取的时候:


var readId = localStorage.getItem(‘id’)



版权声明:本文为gongyi199393原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。