第一步骤 安装vuex,创建一个store.js文件
这个里文件里面包括有这几部分常用的
state===>类似data
mutations(同步操作) ===》类似methods
actions(异步操作)
getters===》类似计算
例子
store.js代码如下
import {createStore} from 'vuex' //引入vuex里面的createStore来创建一个实例化对象
const store = createStore({ //把创建的一个实例化对象赋值给store,方便暴露出去,看store.js文件最下面一行代码
state:{
count:0, //声明的一个变量count,有点类似全局变量
},
mutations:{
//把经常用到的方法放到这里,别处想用就使用.commit()来调取,如
//无参 别处想用就使用.commin('increment')来调取
increment(state){
// 不能再mutations进行异步操作,要借助action对象才可以
state.count++
},
//有参 别处想用就使用.commin('incrementN',3)来调取
incrementN(state,step){
state.count+=step
},
},
actions:{
//把经常用到的异步方法放到这里,别处想用就使用.dispatch()来调取,如
//无参 别处想用就使用dispatch('addAsync')来调取
addAsync(context){ // context就是store实例对象
console.log("2222",context); //打印出来的数据如图1
setTimeout(()=>{
// commit的作用,就是调用某个mutation函数
context.commit('increment')
},1000)
},
//有参 别处想用就使用.dispatch('addAsyncN',3)来调取
addAsyncN(context,step){
setTimeout(()=>{
context.commit('incrementN',step)
},1000)
},
},
getters:{
//别处使用.getters.showNum
showNum(state){
return '当前最新的数量是['+ state.count +']'
}
}
})
export default store
图一
第二步:在mian.js文件里面写
// 引入大型store
import store from './store.js'
//vue2写法
vue.config.$store = store//全局,别的文件使用可以直接$store.commit('')在js里面使用this.$store.commit('')
window.vm = new Vue({ el: '#app', store, components: { App, }, template: '<App/>', });
//vue3写法我单独写一个笔记(因为vue3中的setup里面不能使用this)
app.use(store)//vue3写法,vue3中一般使用pinia也是一个仓管,比vuex少了一个mutations对象,具体区别还是可以看一下pinia官方文档
第三步 :就可以使用了,使用
<h3>{{ $store.getters.showNum}}</h3>
<button @click="$store.commit('increment')">+1</button>
<button @click="$store.commit('incrementN',3)">+N</button>
看完之后再看这个应该彻底明白了
扩展还有一种使用方法 就是这样,在使用文件里面写
import { mapState,mapMutations,mapActions,mapGetters } from 'vuex';
computed:{
...mapState(['count']),
...mapGetters(['showNum'])
},
methods:{
...mapMutations(['increment']),
...mapActions(['addAsync',]),
}
个人理解笔记,如果有理解错误的,可以给我说