vuex是一个专门为vue构建的状态集管理,主要是为解决组件间状态共享的问题,强调的是集中式管理。 简单的来说就是vue中多个组件之间的传值问题,像简单的父子组件之间可以通过props来执行,或者通过事件触发实现。但是对于同级组件之间的传值,用这个方法就非常的麻烦,所以就需要一种能实现多个组件,不同关系之间的传值问题。
项目中使用:
1.安装:
(1)直接下载包引入
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
(2)使用npm安装:
npm install vuex --save
- 使用import方式引入Vuex :
import Vuex from ‘vuex’
- 使用Vue的插件引入函数Vue.use()使用Vuex
Vue.use(Vuex);
2.安装之后new一个vuex实例对象
var store = new Vuex.Store({
// state表示 存放数据部分
state:{
// 这里就是data数据部分
},
// mutations是store对象的方法部分
mutations:{
modifyMsg (state,Obj){
console.log("这个是方法部分")
}
},
// getters 相当于vue中的计算属性
getters:{
activeList(state){
return state.list.filter(item=>ischecked === false)
}
}
// 动作部分,主要是对mutation部分异步的处理
actions:{
fetchMsg (context){
$.ajax({
url:'PHP/GetMsgs.php',
type:'GET',
data:{},
dataType:'json',
success:function(response){
if ( typeof response === 'string') {
response = JSON.parse(response);
}
console.log(response);
$(response).each(function(k,v){
// console.log(v.id+v.title+v.content);
context.commit('modifyMsg',v);
});
}
});
}
}
});
3.在Vue实例中注册store对象:
new Vue({
el: '#app',
router,
store, // 在vue中注册store
method (){
// 方法部分
}
created (){
// 钩子函数
}
})
4.vuex中state、mutations、getters、actions的使用;
state在vuex中保存数据,如果数据需要通过某些方法做处理就需要用到mutations方法或者getters计算属性,进行处理。
在vue实例中,
触发mutations方法:this.$store.commit触发方法,后面是传过去的参数
调用getters的方法:先在vue实例中引入mapGetters,再 通过...mapGeters(["activeList"])
如下就是具体的操作方法:
import{mapGetters} from "vuex";
var vmx = new Vuex.store({
state:{
list:[] // 一个空数组
},
mutations:{
add: (state,paylaod)=>{
state.list.push(payload); // 通过add方法把vue实例中传过来的参数payload 用push添加到list数组中
}
},
getters:{
activeList(state){
return state.list.filter(item=>item.isChecked===false)
}
}
})
var vm = new Vue({
el : "#app",
data :{
isShow:false
}
store,
methods: {
btn(ev){
console.log(ev.target.value); // 获取当前时间源的value值
this.$store.commit("add",{text:ev.target.value,ischecked:false}); //通过this.$store.commit触发这个add方法,后面是传过去的参数
}
},
computed:{
...mapGeters(["activeList"])
}
})
注意:
(1)actions与mutations的区别:
其中actions区别于mutations的地方在于mutations只能进行同步更改,而actions中的更改可以是异步执行。所以基本上所有用户执行的直接数据更改都是触发mutations属性
在函数执行方面,而需要与后端进行数据交互的数据更改通常是通过actions属性函数去执行。
(2)在组件中访问数据 state:
在Vue实例中可以通过this.$store.state对象获取state中的数据。如果希望在state中的数据发生更改之后,组件会自动更新,则应该使用组件的computed属性定义数据,而不是通过data属性定义。如果使用data定义组件数据,则state中的数据发生更改之后组件不会发生变化。