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’)