vuex是什么？
- vuex是专为vue.js应用程序开发的状态管理模式
- 它采用集中式存储管理应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
- vuex也集成到vue的官方调式工具devtools extension
状态管理到底是什么？
- 说简单点就是把需要多个组件共享的变量全部存储到一个对象里面，然后将这个对象放到顶层的实例中，让其他组件可以使用
- 为什么我们不自己封装一个对象来管理呢？
- 因为封装在vuex里面的数据能够直接做到响应式
什么时候用vuex
- 当多个视图都依赖同一个状态的时候
vuex基本使用
在src目录下创建文件夹store，并且创建一个index.js文件，
import Vue from 'vue'
import Vuex from 'vuex'
// 1.安装插件
Vue.use(Vuex)
//创建实例
const store = new Vuex.Store({
state:{
count:0
},
mutations:{
increment(state){
state.count++
}
}
})
然后让所有Vue组件都能使用这个store对象
来到main.js文件，导入store对象，并放到new Vue中
这样，其他组件就可以通过this.$store的方式，获取到这个store对象了
import Vue from 'vue'
import App from 'App'
import store from './store'
new Vue({
el:'#app',
store,
render:h=>h(App)
})使用vuex中的count
通过this.$store.state.属性的方式来访问状态
通过this.$store.commit('mutatiom中方法')来修改状态
- 注意事项：
- 我们通过提交mutation的方式，而非直接改变store.state.count
- 这是因为vuex可以更明确的追踪状态的变化，所以不要直接改变store.state.count的值
vuex中的几个核心的概念
- state
- getters
- mutations
- actions
- module
state
- 存放共享源数据
- 数据的修改不在此进行
getter
有时候我们需要从store中获取一些state变异后的状态
如：有一组对象数据，我么要获取年龄大于20岁的个数
getters:{
greaterAgestu:state=>{
return state.students.filter(s => s.age>=20)
}
}
getter默认不能传递参数，如果要传参，只能让getters本身返回另一个参数
如：根据ID获取用户信息
getters:{
stuByid:state=>{
return id=>{
return state.students.find(s=> s.id===id)
}
}
}
mutation
- vuex中store状态更新唯一方式：提交Mutation
- mutation的主要两部分：1.字符串的事件类型（type） 2.回调函数（handler），该回调函数的第一个参数就是state
mutations的定义
mutations:{
increment(state){
state.count++
}
}
组件中通过mutation更新
increment：function(){
this.$store.commit('increment')
}
mutation传递单个参数
decrement：funtion(){
this.$store.commit('decrement',2)
} decrement(state,n){
state.count -= n
} mutation传递多个参数
使用对象this.$store.commit('decrement',{count:0})
在用payload对象取出相关信息
decrement(state,payload){
state.count =payload.count
}
mutation的另一种提交风格（type对象属性）
this.$store.commit({
type:'changeCount'，
count：100
}) Mutation中的处理方式是将整个commit的对象作为payload使用, 所以代码没有改变
changeCount(state,payload){
state.count =payload.count
}
mutation的常量类型：
1.在mutation中, 我们定义了很多事件类型(也就是其中的方法名称)
2.方法过多, 使用者需要花费大量的经历去记住这些方法, 甚至是多个文件间来回切换, 查看方法名称, 甚至如果不是复制的时候, 可能还会出现写错的情况. 如何解决：
1.我们可以创建一个文件: mutation-types.js, 并且在其中定义我们的常量
2.定义常量时, 我们可以使用ES2015中的风格, 使用一个常量来作为函数的名称. 具体实现：
mutation-types.js文件中
export const UPDATE_INFO = 'UPDATE_INFO' 在vuex的index.js文件中
引入：import * as types from './mutation-types' 使用：[UPDATE_INFO](state,payload){ } 在组件中
引入：import {UPDATE_INFO} from './store/mutation-types'
使用：直接使用UPDATE_INFO
- 当有异步操作的时候，不要使用mutation,使用actions，因为当使用mutation时，官方插件devtools监控不到异步操作
actions
- 但是某些情况, 我们确实希望在Vuex中进行一些异步操作, 比如网络请求, 必然是异步的. 这个时候怎么处理呢?
- Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
mutation和action对比
mutation:{
increment(state){
state.count++
},
action:{
increment(context){
context.commit('increment')
}
}
} context是什么?
context是和store对象具有相同方法和属性的对象.也就是说, 我们可以通过context去进行commit相关的操作, 也可以获取context.state等. 在Vue组件中, 如果我们调用action中的方法,那么就需要使用dispatch (同样也支持传递payload对象属性)
methods：{
increment(){
this.$store.dispatch('increment',{count:5})
}
} mutations:{
increment(state,payload){
state.count += payload.count
}
}
actions:{
increment(context,payload){
setTimeout(()=>{
context.commit('increment',payload)
},5000)
}
}
在Action中, 我们可以将异步操作放在一个Promise中, 并且在成功或者失败后, 调用对应的resolve或reject.
actions:{
increment(context){
return new Promise((resolve)=>{
setTimeout(()=>{
context.commit('increment')
resolve()
},1000)
})
}
} methods:{
increment(){
this.$store.dispatch('increment').then(res=>{
console.log('完成了更新操作')
})
}
}
midule
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理.
当应用变得非常复杂时,store对象就有可能变得相当臃肿.
为了解决这个问题, Vuex允许我们将store分割成模块(Module), 而每个模块拥有自己的state、mutations、actions、getters等 const moduleA ={
state:{...},
mustation:{...},
....
} const store =new Vuex.Store({
modules:{
a:moduleA
b:moduleB
}
})
Module局部状态
- 我们在moduleA中添加state、mutations、getters
- mutation和getters接收的第一个参数是局部状态对象
- 虽然, 我们的doubleCount和increment都是定义在对象内部的
- 但是在调用的时候, 依然是通过this.$store来直接调用的.
actions的写法呢? 接收一个context参数对象
局部状态通过 context.state 暴露出来，根节点状态则为 context.rootState
const moduleA ={
//...
actions:{
incrementInfoRootSum({state,commit,rootState}){
if((state.count + rootstate.count)%2 ==1 ){
commit('increment')
}
}
}
}
最后抽取store中的各个对象到各个文件，在进入导入，来完成最后清晰的项目结构