一、什么是vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
二、使用:
1、安装。
npm install vuex --save
2、在项目某个文件夹下 新建文件夹(store)=> store.js
3、在store.js 里
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) /*1.state在vuex中用于存储数据*/ var state={ count:1, list:[] } /*2.mutations里面放的是方法,方法主要用于改变state里面的数据*/ var mutations={ incCount(){ ++state.count; }, addList(state,data){ state.list = data; } } //vuex 实例化 Vuex.store 注意暴露 const store = new Vuex.Store({ state, mutations }) export default store;
4、在需要使用的页面 (good.vue) 下 的 script内 引入
<script> //1. 引入store import store from '../vuex/store.js'; export default { data() { return { list:[] }; }, store, methods:{ inccount(){ this.$store.commit('incCount'); }, requestData(){ var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1'; this.$http.get(api).then((res)=>{ this.list = res.body.result; this.$store.commit('addList',res.body.result) },(err)=>{}) } },mounted() { //判断 store里面有没有数据 var listData=this.$store.state.list; if(listData.length>0){ this.list = listData; }else{ this.requestData(); } } } </script>