vuex:
vuex是vue的一个插件
作用:
- 是vue的一种状态管理(数据状态)机制(状态机)
- 维护共享数据
- 只适合中大型页面开发
安装:
- cdn
- npm
- 外部脚本文件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
}
})