我们一起看看Vuex使用流程是什么样的?

[[402869]]

一、使用Vuex的目的

实现多组件状态管理，多个组件之间需要数据共享

二、Vuex 的五大核心

其中state和mutation是必须的，其他可根据需求来加

• 1、state 负责状态管理，类似于vue中的data，用于初始化数据
• 2、mutation 专用于修改state中的数据，通过commit触发
• 3、action 可以处理异步，通过dispatch触发，不能直接修改state，首先在组件中通过dispatch触发action，然后在action函数内部commit触发mutation，通过mutation修改state状态值
• 4、getter Vuex中的计算属性，相当于vue中的computed,依赖于state状态值，状态值一旦改变，getter会重新计算，也就是说，当一个数据依赖于另一个数据发生变化时，就要使用getter
• 5、module 模块化管理

使用流程

1.创建store实例并且导出 store.js

import Vue from 'vue' 
import Vuex from 'vuex' 
Vue.use(Vuex) 
const store = new Vuex.Store({ 
    //声明state 
    state: {  
      userInfo:{ userName:"" } 
    },        
    //声明mutations 
    mutations: { 
      setUserInfo(state,userInfo){   
        state.userInfo = userInfo 
      } 
    },    
    //声明actions 
    actions: { 
      setUserInfo({ commit },userInfo){ 
        commit('setUserInfo',userInfo) 
      } 
    },     
    //声明getters 
    getters:{ 
      userName(state){ 
        return "姓名："+state.userInfo.userName 
      } 
    } 
}) 
export default store 

2.引入Vuex

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

3.组件内使用

使用方式一

<template> 
 <div> 
     <!-- state使用 --> 
     <p>{{$store.state.userInfo.userName}}</p> 
     <!-- getters使用 --> 
     <p>{{$store.getters.userName}}</p> 
     <!-- action使用 --> 
     <p @click="setInfo">存储信息</p> 
 </div> 
</template> 

export default { 
   methods: { 
      setInfo(){ 
        this.$store.commit('setUserInfo',{ 
          userName:"鬼鬼"  
       })  
     } 
   } 
} 

使用方式二

<template> 
 <div> 
     <!-- state使用 --> 
     <p>{{userInfo.userName}}</p> 
     <!-- getters使用 --> 
     <p>{{userName}}</p> 
     <!-- action使用 --> 
     <p @click="setInfo">存储信息</p> 
 </div> 
</template> 

import { mapState, mapGetters, mapMutations, mapActions } from 'vuex' 
export default { 
  methods: { 
    ...mapActions(['setUserInfo']), 
    // ...mapMutations(["setUserInfo"]), 
    setInfo(){ 
      this.setUserInfo({ 
         userName:"鬼鬼"  
     }) 
  }, 
  computed: { 
    ...mapState({  
        userInfo: state => state.userInfo 
     }), 
    ...mapGetters(['userName']), 
  } 
} 

本文转载自微信公众号「前端人」，作者鬼哥。转载本文请联系前端人公众号。