vue的状态管理 vuex

什么是状态管理

问：首先我们要知道状态管理是用来做什么的？
答：vuex可以帮助我们管理共享状态，也就是管理全局变量
问：不使用状态管理我们用什么管理全局变量？
答：不使用状态管理的情况下我们也有办法做到把变量放到全局使用，可以用cookie localstorage sessionstorage本地存储的形式 小程序还有专门存储全局的方法 globaldata
问：既然我们有别的方式处理全局变量为啥还要用状态管理
答：首先本地存储形式不是响应式的储存，还有频繁的字符串和对象之间的转化是否会浪费很多内存

状态管理的使用

安装

npm i vuex -s

目录结构 新建文件夹命名为store 在文件夹下新建文件 index.js

│
└─store
index.js

index.js 中编写代码

import Vue from 'vue'
import Vuex from 'vuex'

//挂载Vuex
Vue.use(Vuex)

//创建VueX对象
const store = new Vuex.Store({
    state:{
        //存放的键值对就是所要管理的状态
        age: '20'
    }
})
export default store

在 main.js 文件中编写代码 将vuex挂载在vue实例中

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

使用状态管理 组件中使用 用 {{$store.state.age}} 在方法中使用 this.$store.state.age

VueX中的核心成员

state 存放状态
mutations 是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等
getters 加工state成员给外界 getters中方法的第三个参数是根节点状态
actions 中方法获取局部模块状态是context.state,根节点状态是context.rootState
modules 模块化状态管理 当项目庞大，状态非常多时，可以采用模块化管理模式。Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

mutations 使用方法

我们编写一个方法，当被执行时，能把下例中的age++,我们只需要这样做

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.store({
    state:{
        age:'20'
    },
    mutations:{
        addAge(state){
            state.age++
        }
    }
})

export default store

而在组件中，我们需要这样去调用这个mutation——例如在App.vue的某个method中:

this.$store.commit('addAge')

在实际操作过程中，会遇到需要在提交某个mutation时需要携带一些参数给方法使用。

this.$store.commit('addAge',15)

addAge(state,payload){
      state.age += payload
      console.log(payload) // 15
  }

另一种提交方式

this.$store.commit({
  type:'addAge',
  payload:{
      age:15
  }
})

Getters 可以对state中的成员加工后传递给外界

getters:{
    userinfo(state,getters){
        return state.name + '年龄:' + state.age
    },
    fullInfo(state,getters){
        return getters.userinfo + '性别' + state.sex
    } 
}

组件中 this.$store.getters.fullInfo

Actions 由于直接在mutation方法中进行异步操作，将会引起数据失效。所以提供了Actions来专门进行异步操作，最终提交mutation方法。

我们在两秒中后执行addAge
由于setTimeout是异步操作，所以需要使用actions

actions:{
    aAddAge(context,payload){
        setTimeout(()=>{
            context.commit('addAge',payload)
        },2000)
    }
}

结合promise

aAddAge(context,payload){
        return new Promise((resolve,reject)=>{
            setTimeout(()=>{
                context.commit('addAge',payload)
                resolve()
            },2000)
        })
    }

在组件中 this.$store.dispatch('addAge', 15)

总结

所有组件都是调用actions，分发mutation去修改state，然后state经过getter又更新到各个组件里。state又通过localStorage存储数据到本地，下次重新打开时再读取保存的数据

模块化

为什么要用模块化？当我们的项目比较大，组件很多，功能也多，会导致state里要存放很多内容，整个 store 都会很庞大，很难管理
我模块化的store目录如下：

|-store/                   // 存放vuex代码
|   |-eventModule          // 事件模块
|   |   |-actions.js
|   |   |-getters.js
|   |   |-index.js
|   |   |-mutations.js
|   |   |-state.js
|   |-themeModule           // 主题颜色模块
|   |   |-actions.js
|   |   |-getters.js
|   |   |-index.js
|   |   |-mutations.js
|   |   |-state.js
|   |-index.js              // vuex的核心，创建一个store

可以看到，每个模块拥有自己的state、mutation、action、getter，这样子我们就可以把我们的项目根据功能划分为多个模块去使用vuex了

状态管理

接下来，我们来看看vuex完成状态管理的一个流程。在 event_list.vue 文件里新建一个AddAge方法。

methods: {
    AddAge(id){ 
        this.$store.dispatch('eventadd', 10);
    }
}

在 AddAge方法中通过 store.dispatch 方法触发 action, 接下来我们在 eventModule/actions.js 中来注册这个 action, 接受一个 10 的参数。

export default  {
    eventdone = ({ commit }, param) =>{
        commit('EVENTDONE',{addCount: param});
    }
}

action 通过调用 store.commit 提交载荷(也就是{addCount: param}这个对象)到名为’EVENTDONE’的 mutation，那我们再来注册这个 mutation

export default  {
    EVENTDONE(states,obj){
    	states.age += obj.addCount
        local.set(states);                          // 将整个状态存到本地
    }
}

通过 mutation 去修改 state, state里我们存放了一个 event 属性

export default  {
    age : 10
};

在组件中要获得这个 state 里的 age, 那就需要写个getters

export default {
    getAge(states){
        return (states.age > 18 ? states.age : '已成年')
    }
};

然后每个module里都有一个index.js文件，把自己的state、mutation、action、getters都集合起来，就是一个module

import * as func from '../function';
import actions from './actions.js';
import mutations from './mutations.js';
import state from './state.js';
import getters from './getters.js';

export default  {
    state,
    getters,
    actions,
    mutations
}

在 store/index.js 里创建一个 store 对象来存放这个module

import Vue from 'vue';
import Vuex from 'vuex';
import event from './eventModule';
Vue.use(Vuex);
export default  new Vuex.Store({
    modules: {
        event
    }
});

最后在 event_list.vue 组件上，我们通过计算属性 computed 来获取到这个从未完成的状态改变到已完成的状态，我们要用到 store 这个对象里的getters

computed: {
    getDone(){
        return this.$store.getters.getDone;
    }
}