使用vuex实现组件间数据共享及修改status的值

1、使用vuex，首先得安装它

npm install vuex --save

2、在store文件夹下的index.js引入vuex

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vuex.Store({ state: { //存放组件间或全局中要用的值 isShowlog: false } }) export default store

3、在main.js中引入index.js

import store from './store' new Vue({ el: '#app', router, store, //这里一定要引入 render: h => h(App) })

4、这样就可以在每个组件中使用这个数据了

<Log v-if="$store.state.isShowlog"></Log>

5、当要修改这个值时，会调用actions事件，而调用此事件之前必须先调用dispatch事件,然后actions调用mutations，必须通过commit方法 在这里演示的是这种省略action，直接使用mutations，修改state中的值 在store文件夹下的index.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { isShowlog: false }, mutations: { changeLog (state, isShowlog) { // 参数state指的是我们的所有公用数据 state.isShowlog= isShowlog } } }) handleLogClick (isShowlog) { this.$store.commit('changeLog', isShowlog) }

6、vuex获得state数据另一种写法

<template> <Log v-if="isShowlog"></Log> </template> <script> import {mapState} from 'vuex' export default { computed: { // 把state中的isShowlog属性映射到名字为isShowlog的计算属性之中 ...mapState(['isShowlog']) } } </script>

7、vuex修改state数据另一种写法 直接引入vuex的mapMutations API这样就不用使用调用this.$store.commit方法

import {mapState, mapMutations} from 'vuex' export default { methods: { routerTo (isShowlog) { this.changeLog(isShowlog) this.$router.push({path: '/'}) }, ...mapMutations(['changeLog']) } }

8、可以拆分store文件夹下的index.js 可以拆分成state.js、mutations.js,在index.js中引用，这样方便以后维护

import Vue from 'vue' import Vuex from 'vuex' import state from './state' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state, mutations })

9、但是当被改变页刷新时，isShowlog会变为原来的默认值，为了解决这个问题，要用到localStorage

mutations: { changeCity (state, isShowlog) { state.isShowlog= isShowlog try { if (localStorage.isShowlog) { localStorage.isShowlog= isShowlog } } catch (e) {} } }

在这里建议只要使用localStorage都在外面都包一层try…catch,防止用户在隐身模式或者关闭了本地存储功能下浏览器抛出异常