vuex: vuex是vue的一个插件 作用：
是vue的一种状态管理(数据状态)机制(状态机)维护共享数据只适合中大型页面开发安装：
cdnnpm外部脚本文件vuex.js使用： 1.实例化-状态机
var store=new Vuex.Store({ //核心概念 state:{ //管理数据状态，数据初始化,类似于data 需要通过突变来进行改变 }, getters:{ //获取器 //数据获取，相当于computed.一般用于过滤state中的数据 student:state=>state.student //系统注入state }, mutations:{ //突变-类似methods,只能声明同步函数，是修改state中的数据的唯一途径 不能执行异步操作 addMemo(state,id){ //state是系统注入 //第二个位置参数为自主注入的参数 } }, actions:{ //动作-类似于methods中的异步函数，一般用于数据交互 getData(context,id){ //context:系统自动注入，是当前状态机对象：this //第二个参数位置开始，为自主注入参数 $.get(url,function(data){ student=data.list actions->突变->改变state }) } } })2.注入到vue的根实例对象中
new Vue({ el:'#app', store })1.不使用vuex时：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../vue.js"></script> <script src="../vuex.min.js"></script> <script> window.onload=function(){ new Vue({ el:'#app', data:{ msg:'', index:1, list:[] }, methods:{ addMemo(){ //声明数据格式 var memo={ id:this.index, msg:this.msg, time:new Date().toLocaleString() } //追加到list中 this.list.push(memo) this.index++; this.msg=''; },//end delMemo(id){ this.list=this.list.filter(function(item){ //filter返回值为满足条件的新数组 return item.id!=id }) }//end } }) } </script> </head> <body> <div id="app"> <h1>备忘录</h1> <form action="#" @submit.prevent='addMemo'> <input type="text" v-model='msg'> <input type="submit" value='保存'> </form> <ul> <li v-for='item in list'> <span>{{item.id}}、</span> <span>{{item.msg}}</span> <span>{{item.time}}</span> <a href="" @click.prevent='delMemo(item.id)'>删除</a> </li> </ul> </div> </body> </html>2.使用vuex,但只操作state和mutations,此时只需要在原来methods相对应的函数触发突变即可（但这种从state中直接获取数据，不建议使用） 思路模型图：
script中的代码变化如下：
//1.实例化vuex实例 var store=new Vuex.Store({ state:{ list:[], }, getters:{}, mutations:{ addMemo(state,memo){ //追加到list中 state.list.push(memo) },//end delMemo(state,id){ state.list=state.list.filter(function(item){ //filter返回值为满足条件的新数组 return item.id!=id }) }//end }, actions:{} }) new Vue({ el:'#app', store, data:{ msg:'', index:1, }, computed:{ list:function(){ return this.$store.state.list } }, methods:{ addMemo(){ //声明数据格式 var memo={ id:this.index, msg:this.msg, time:new Date().toLocaleString() } //追加到list中 // this.list.push(memo) //触发突变 this.$store.commit('addMemo',memo) this.index++; this.msg=''; },//end delMemo(id){ this.$store.commit('delMemo',id) }//end } })3.使用vuex,通过getter来获取值 思路模型如下：
script中的代码变化如下：
//1.实例化vuex实例 var store=new Vuex.Store({ state:{ list:[], }, getters:{ list:function(state){ return state.list } }, mutations:{ addMemo(state,memo){ //追加到list中 state.list.push(memo) },//end delMemo(state,id){ state.list=state.list.filter(function(item){ //filter返回值为满足条件的新数组 return item.id!=id }) }//end }, actions:{ //动作 getData(context,memo){ $.ajax({ url:'http://47.106.244.1:8099/manager/category/findAllCategory', success:function(data){ // console.log(data); //触发突变 context.commit('addMemo',memo); } }) } } }) new Vue({ el:'#app', store,//挂载 data:{ msg:'', index:1, }, computed:{ list:function(){ return this.$store.getters.list } }, methods:{ addMemo(){ //声明数据格式 var memo={ id:this.index, msg:this.msg, time:new Date().toLocaleString() } //触发动作,传递memo-异步函数 this.$store.dispatch('getData',memo) this.index++; this.msg=''; },//end delMemo(id){ this.$store.commit('delMemo',id) }//end } })4.使用vuex,引入辅助函数，来简化数据操作 script中的代码变化如下：
//引入辅助函数 var mapState=Vuex.mapState; //将state封装起来 var mapGetters=Vuex.mapGetters; var mapMutations=Vuex.mapMutations; var mapActions=Vuex.mapActions; //1.实例化vuex实例 var store=new Vuex.Store({ state:{ list:[], students:[1,2,3,4,5] }, getters:{ list:function(state){ return state.list }, students:function(state){ return state.students } }, mutations:{ addMemo(state,memo){ //追加到list中 state.list.push(memo) },//end delMemoHandler(state,id){ state.list=state.list.filter(function(item){ //filter返回值为满足条件的新数组 return item.id!=id }) }//end }, actions:{ //动作 getData(context,memo){ $.ajax({ url:'http://47.106.244.1:8099/manager/category/findAllCategory', success:function(data){ // console.log(data); //触发突变 context.commit('addMemo',memo); } }) } } }) new Vue({ el:'#app', store,//挂载 data:{ msg:'', index:1, }, computed:{ // ...mapState(['list','students']) ...mapGetters(['list','students']) }, methods:{ ...mapMutations(['delMemoHandler']), ...mapActions(['getData']), addMemo(){ //声明数据格式 var memo={ id:this.index, msg:this.msg, time:new Date().toLocaleString() } //触发动作,传递memo-异步函数 // this.$store.dispatch('getData',memo) this.getData(memo); this.index++; this.msg=''; },//end delMemo(id){ // this.$store.commit('delMemo',id) this.delMemoHandler(id); }//end } })