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

一、使用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.组件内使用

使用方式一

 
 
 
 

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

使用方式二

 
 
 
 

  
  
  
  
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']), 
  
  
  
  
  } 
  
  
  
  
} 
 
 
 
 

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

分享文章：我们一起看看Vuex使用流程是什么样的?
分享路径：http://www.mswzjz.cn/qtweb/news8/451158.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能