Vue 中 store 基本用法
用来管理状态,共享数据,在各个组件之间管理外部状态
第一步:项目安装vuex插件
npm i vuex
第二步:引入vuex,并通过use方法使用它
import Vuex from 'vuex'
Vue.use(Vuex)
第三步: 创建状态仓库
//创建状态仓库,注意第二个Store是大写的不能改,,state也是不能改
var store = new Vuex.Store({
state:{ //在state对象建立需要数据
XXX:xxx
}
})
第四步:在main.js注入Vue实例当中
new Vue({
el: '#app',
router,
store, //注入store,当键名(key)和值(value)名字一样可以这样缩写
components: { App },
template: '<App/>'
})
第五步:通过this.$sore.state.XXX拿到全局状态
computed:{
getOutterNum:function(){
return this.$store.state.XXX
}
}
七、Vuex的相关操作
vuex状态管理的流程
view——>actions—–>mutations—–>state——>view
一、
方法一、更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
const store = new Vuex.Store({ //定义了store
state:{
num:88
},
mutations:{ //定义状态改变函数 相当于methods方法
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
//1、store.commit('save') 定义了的store利用commit在mutations调用自身mutations其他函数
}
//2、save(){...}
}
})
在其他组件中利用commit来触发mutations函数
methods:{
sadd:function(){
this.$store.commit('increase') //commit方法里面是mutations定义的函数名
}
},
this.$store.commit('increase',xxx)
xxx
表示传入参数,如果需要传入多个参数,将xxx
表示成对象{xxx1:'',xxx2:''}
方式传入,在对象内构成多个需要传入参数。
方法二:
利用actions中对mucations进行操作,间接对state进行修改
mutations:{
increase:function(state){
state.num++
},
decrease:function(state){
state.num--
}
},
actions:{ //actions中只能对mucations进行操作
//context为上下文对象
decreaseActions:function(context){
context.commit('decrease') //decrease方法是mucations中定义的方法
}
}
})
利用dispatch来触发actions函数
saddActions:function(){
//dispatch方法里面是actions定义的函数名
this.$store.dispatch('decreaseActions')
}
mucations和actions两者之间区别
1、传递参数不一样,前者传递是state,后者传递是context。
2、调用的方式不一样,前者靠this.$store.commit('xxx')
触发,后者靠this.$store.dispatch('xxx')
触发。
3、actions可以包含异步操作,但是mutation只能包含同步操作
actions:{
decreaseActions:function(context){
setTimeout(() => { //延时一秒的异步操作
context.commit('decrease')
}, 1000);
}
}
二、getters是vuex中的一个属性,主要作用于vue中的计算属性(computed)类似,用来存放一些经过修改的数值
getters:{
getNum:function(state){
return state.num>0? state.num:0
}
}
在调用getters中的内容是使用$store.getters.函数名进行调用
computed:{
getParentNum:function(){
return this.$store.getters.getNum //getNum是getter里面定义方法
}
}
总结:在工程化项目中,vuex所有内容建议和routers一样,在src中建立一个state文件夹>index.js,将vuex内容写在index.js中,再导出到main.js中。