npm install vuex
main.js中添加
import Vuex from 'vuex'
Vue.use(Vuex)
在src中创建store文件创建index.js
在index.js
也要导入import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
写出下面基础架子
const store = new vuex.store({
state: {
money: 80
},
})
export default store
//导出组件
组件内调用需要使用
this.$store.state.属性名
vue不能直接改变vuex内部的数据
需要在仓库使用mutations:{
add(state){
state.你要操作的属性名,和操作方法
}
//mutations不能异步
}
在组件的methods:{
中在调用 this.$store>commit("你要执行的mutations内的函数")
}
mutations不能异步,所以有actions
是这样写的如上图vue调用actions
actions在调用mutations,
mutations在改变state
state在改变视图
actions:{
add(context){
//context这是个上下文
//Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象,因此你可以调用 context.commit 提交一个 mutation,或者通过 context.state 和 context.getters 来获取 state 和 getters。当我们在之后介绍到Modules时,你就知道 context 对象为什么不是 store 实例本身了。
//这是官方的给出的解释
context.commit('add')
原vue的调用在这
}
}
在actions里面调用了mutations我们在vue组件里面也不在直接调用mutations了,
在vue组件我们这样调用this.$store.dispatch(“add”)
这是调用actions的方法。actions调用可以异步,
不用异步也可以直接调用mutations
这些是我们老师讲的我自己整理的笔记,顺便发上来看看有没有需要的,可能不全或者我写的不好不用介意,帮到你最好,帮不了只可以说抱歉了。