Vuex.store的作用就是将两个非父子关系的组件所要用到的公共数据方便存放和修改 操作步骤： 在项目根目录的src文件夹中创建store文件夹，该文件夹中建立index.js文件 以下为index.js的基本内容,基于模块化思想,需要在同路径下另外创建state.js,actions.js,mutations.js import Vue from 'vue'; import Vuex from 'vuex'; import state from './state'; import mutations from './mutations'; import actions from './actions';
Vue.use(Vuex)
export default new Vuex.Store({ state, actions, mutations })
state.js文件样例：该文件中就是存放页面间需要变化的变量scene let defaultScene = '美景1'
try { if(localStorage.scene){ // localStorage缓存scene这个变量，防止页面被刷新而覆盖掉scene这个变量之前的值 defaultScene = localStorage.scene } } catch(e){} export default { scene: defaultScene }
mutations.js文件样例：该文件中就是存放改变state.js中变量scene的方法changeScene() export default { changeScene(state, scene){ state.scene = scene try { localStorage.scene = scene } catch(e){ } }
而在组件中需要去改变变量scene的时候通过this.$store.state.scene去直接使用vuex.store中scene的值
vuex中的...mapState(['scene'])和...mapMutations(['changeScene'])是一种组件数据使用代码的优化 mapState()和mapMutations()都是在组件中去使用的, 前者写在computed：{}计算属性中,后者写在methods:{}中 这样在组件中需要去改变或者使用变量scene的时候就可以写成this.scene和this.changeScene(scene)去使用了
以上就是vuex使用以来的小型总结，便于日后查阅使用
