大前提:vuex函数包引入
- 新建一个名为store文件夹,在名下新建index.js
- index.js中引入vuex函数包
import Vue from "vue";
import Vuex from "vuex";
//需要使用插件一次
Vue.use(Vuex);
属性介绍
state
存储数据,数据状态管理
mutations
: 同步操作数据,将数据提交给state
actions
: 异步操作,提交mutations
存储数据
- 首先需要页面组件绑定actions(谁来调用)
mounted() {
//通知Vuex发请求,获取数据,存储与仓库当中
this.$store.dispatch("categoryList");
},
- 在actions对象中定义绑定的actions函数(以下皆是定义具体的actions方法)
const actions={
//通过api里面的接口函数调用,向服务器发请求,获取服务器的数据
async categoryList({commit}){
let result= await reqCategoryList();
if(result.code==200){
commit("CATEGORYLIST",result.data)
}
}
};
- 定义mutations对象,定义actions调用的mutations函数
const mutations={
CATEGORYLIST(state,categoryList){
state.categoryList=categoryList;
}
};
- 定义state存储属性 ,定义一个属性,用来接收或者返回数据
const state={
//state中数据默认初始值别乱写,服务器返回对象,服务器返回数组【和服务器返回值一样类型】
categoryList:[],
};
获取数据
- 在需要获取数据的组件中定义computed属性,然后引入mapstate函数,然后定义一个属性用来接收state仓库里的属性值
(记得引入mapstate的函数包)
import { mapState } from "vuex";
computed: {
...mapState({
//右侧需要的是一个函数,当使用这个计算属性的时候,右侧函数会立即执行一次
//注入一个参数state,其实即为大仓库中的数据
categoryList: (state) => state.home.categoryList,
}),
},
流程:
触发事件的时候,会通过dispatch来访问actions中的方法,actions中的commit会触发mutations中的方法修改state的值,通过getter把数据更新到视图。