vue学习基础(10)vuex状态管理,store.js

安装

vue add vuex

项目自动修改

vue学习基础(10)vuex状态管理,store.js

store.js

vue学习基础(10)vuex状态管理,store.js

state:存放要用到的一些数据

mutations:触发一些方法

获得数据方式一

vue学习基础(10)vuex状态管理,store.js

简写的方法,引入一些东西

import {mapState} from 'vuex'

vue学习基础(10)vuex状态管理,store.js

方式三:名字一致,简写数组形式

vue学习基础(10)vuex状态管理,store.js

 

改变数据mutations方法

三种调用方法

vue学习基础(10)vuex状态管理,store.js

vue学习基础(10)vuex状态管理,store.js

 

getters对state里面的值可以进行过滤

例子如下,getters对state里面的list进行过滤

vue学习基础(10)vuex状态管理,store.js

写方法,要有return

vue学习基础(10)vuex状态管理,store.js

页面调用

vue学习基础(10)vuex状态管理,store.js

vue学习基础(10)vuex状态管理,store.js

actions作用是先执行异步操作,再去调用mutation

写一个向服务器请求数据

vue学习基础(10)vuex状态管理,store.js

mutations写一个更新数据方法

vue学习基础(10)vuex状态管理,store.js

引入mock,随机生成数组

vue学习基础(10)vuex状态管理,store.js

actions,里面可以执行异步的操作

vue学习基础(10)vuex状态管理,store.js

vue学习基础(10)vuex状态管理,store.js