vuex的初步使用

1.先下载好，npm install vuex --save; 2.在src文件新建一个store文件，里面在建个index.js; 3.在index.js；

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { saveBookName: [] // 自己定义的变量名 }, mutations: { // 就相当于函数 去操作处理state里面的数据; addbook: (state) => { localStorage.setItem('bookarray', state.saveBookName) } } })

我现在要把收藏的书籍，保存在一个数组里面；然后在书架页面，全部展示出来，用于增删查改； book.vue

bookShelf(bookId){ // 收藏按钮执行的事件 this.$refs.putBookshelf.setAttribute('disabled',true); this.$refs.putBookshelf.className = 'active'; this.$store.state.saveBookName.push(bookId); // 把id push到数组里面； this.$store.commit('addbook'); // 同时把他存在localStorage里面; }

bookShelf.vue 书架页面

computed: { // 计算属性 saveBookName() { let localData = window.localStorage.getItem('bookarray').split(',') // 转化为数组； if(this.$store.state.saveBookName.length === 0){ // 存储的数据长度为0，就证明刷新了，就没有了， 就要从localStorage 取 return localData; }else{ return this.$store.state.saveBookName; //没有刷新，就直接取 } } }

用了vuex，储存的data就相当于是全局变量；刷新一下，就又回到初始值了； 最后还是要依靠localStorage来，所以vuex的核心功能还有待挖掘；