vuex的使用

在react中有redux进行全局状态管理，那么在vue中自然也有自己的状态管理插件vuex。vue相较于react来说较容易一些，封装了很多方便操作的指令供我们使用比如：v-show,v-if,v-else-if, v-else，v-bind,v-for,v-model,v-on...;就像vue一样vuex也给我我们搭建好了框架；
同步方法我们都写在mutations里面，要触发mutations里面的方法要用到commit,另外状态值的改变尽量都要放到mutations中操作。
异步方法我们需要放到actions 里面，actions 中获取到最新的值也通过commit去触发mutations中的方法，actions中的方法要通过dispatch触发
getters类似于一个store中的计算属性。
下面我们来实现之前我们在redux文章中实例：登录状态和count计数。
没有安装的话可以先安装vuex，在这我们直接进行演示
src下面创建store文件夹，在store文件夹下面创建index.js文件

src/store/index.js

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const state = {//初始状态中添加两个变量
    status: "去登录",
    count: 0
}
const getters = {
    caul(state){
        return state.count % 5
    }
}
const mutations = {
    LOGINLOADIND(state){
        state.status = "登录中..."
    },
    LOGINED(state,data){//接收actions传过来数据
        state.status = "已登录"
    },
    LOGOUT(state){
        state.status = "已退出，去登陆"
    },
    ADD(state){
        state.count += 2
    }
}
const actions = {
    ASYNCLOGIN(context,data){//还可以传入另外的参数作为第二个参数传入
        context.commit("LOGINLOADIND");
        setTimeout(()=>{
            context.commit("LOGINED",data);//将参数传给mutations 中的LOGINED方法，在这是举例这个data在这并没实际意义，需不需要第二个参数结合实际项目来定
        },1000)
    }
}

const store = new Vuex.Store({
    state,
    getters,
    mutations,
    actions
})
export default store

需要修改我们main.js将store导入进去

import Vue from 'vue'
import App from './App.vue'
import store from "./store"

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

然后我们去修改src/APP.vue

<template>
  <div id="app">
    <p>{{$store.state.status}}</p>
    <!-- 第一种方式 -->
    <button @click="$store.commit('LOGINLOADIND')">去登陆 -> 登录中</button><br/>
    <!-- 第二种方式 -->
    <button @click="LOGINED">未知 -> 已登录</button><br/>
    <button @click="ASYNCLOGIN">异步登录</button><br/>
    <!-- 第三种方式 -->
    <button @click="asynclogin">异步登录2222</button><br/>
    <button @click="logout">退出登录</button>
    <p>state的count： {{$store.state.count}}</p>
    <p>getters处理后的count： {{$store.getters.caul}}</p>
    <p>通过辅助函数传过来的getters： {{caul}}</p>
    <button @click="$store.commit('ADD')">加2</button>
  </div>
</template>

<script>
import { mapMutations, mapActions, mapGetters } from "vuex"
export default {
  computed:{
    ...mapGetters(["caul"])
  },
  methods:{
    ...mapMutations(["LOGINED"]),
    ...mapActions(["ASYNCLOGIN"]),
    logout(){
      this.$store.commit("LOGOUT");
    },
    asynclogin(){
      this.$store.dispatch("ASYNCLOGIN");
    }
  }
}
</script>

我们在这采用了三种方式对store进行操作，其中mapMutations, mapActions, mapGetters是vuex提供给我们方便操作的一些辅助函数，mapGetter放到computed，mapMutations和mapActions放到methods中。我们来查看页面效果

1.gif