目的:为了非父子组件之间的数据共用。
使用方式:
一、在src文件夹下新建一个store.js文件
二、将store.js文件挂载到vue上:在main.js中 import store from '@/store.js',然后在new Vue中的对象中加入store
三、store.js中的操作:引入vue和vuex (import Vue from 'vue' import Vuex from 'vuex'),
Vue.use(Vuex)
export default new Vuex.store({
state,//里面的值是个对象,对象中可以定义很多值
mutations,//值是个对象,对象里面有很多改变值的方法
getters,// 值是个对象,对象里面有很多对值进一步处理的方法
actions,//值是个对象,对象里面有一些异步处理的方法,方法里面调用的是mutations里面的方法
modules,//模块化
})
四、值的展示:先在state里面定义一些值
如:state:{msg:123,count:0}
在某组件中基本引用方式:$store.state.msg
在某组件中高级引用方式:在某组件中1.import {mapState} from 'vuex'
2.在computed对象中加入如下方法:
...mapState({
msg :state => state.msg
})
3.在组件中使用如:{{msg}}
五、改变值:先在mutations里面定义一些方法
如:add(state,count){
state.count += count;
}
在某组件中基本引用方式:@click='$store.commit('add',2)'
在某组件的高级引用方式:在某组件中1.import {mapState, mapMutations} from 'vuex'
2.在methods对象中加入如下方法:
...mutations({
addNum:"add"
})
3.在组件中使用如下: @click="add(2)"
六、对值的进一步处理的方法:先在getters中定义一些方法如:
myList(state){
return state.list.filter(item=>item.type ==1);
}
在某组件的基本引用方式:v-for='item in $store.getters.myList'
在某组件的高级引用方式:在某组件中1.import {mapState,mapMutations,mapGetters} from 'vuex'
2.在computed对象中加入如下方法:
...mapGetters({
myList:"myList"
})
3.在组件中使用如下:v-for="item in myList"
七、异步处理方法使用(actions):
先在actions中定义好一些方法如下:
addAsync(ctx){
ctx.commit('add',2);
}
在某组件中的基本引用方式:@click='$store.dispatch("addAsync")'
在某组件中的高级引用方式:在某组件中1.import {mapState,mapMutations,mapGetters,mapActions} from 'vuex'
2.在methods对象中加入如下方法:
...mapActions({
addAsync:'addAsync'
})
3.在组件中使用如下:@click='addAsync'