深入理解Vuex

Myth丶恋晨 2023-06-25 10:16 37阅读 0赞

# 什么是Vuex #

Vuex是实现组件全局状态管理的一种机制，可以方便的实现组件之间数据的共享。使用Vuex可以集中的管理共享数据，高效实现数据共享，另外Vuex的数据是响应式的，可以实时保持数据与页面的同步。

# 安装方式 #

在使用vue-cli3或4建立项目的时候，有选项是否要安装Vuex，安装即可。项目完成之后，可以看到有一个`store`的文件夹，文件的内容：

import Vue from 'vue'
    import Vuex from 'vuex'
    import axios from 'axios'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
      },
      mutations: {
      },
      actions: {
      },
      modules: {}
    })

# Vuex的使用 #

##   1.state：存放共享数据 ##

state: {
        // 文本框的内容
        inputValue: 'aaa'
    },

访问共享数据的两种方式：

1）this.$store.state.inputValue 
    	
    	2）import { mapState } from 'vuex'
    		
    	   computed: {
    	        // 展开运算符，将全局变量映射为自己界面的变量
    			...mapState(['inputValue']) 
           }

##   2.mutation：修改vuex中的数据 ##

// 更新文本框的值
        setInputValue (state, value) {
          state.inputValue = value
        },

界面上使用的两种方式：

1）this.$store.commit('setInputValue', value)
    	
    	2）import { mapMutations } from 'vuex'
    		
    	   methods:{
    	       ...mapMutations(['setInputValue'])
           }

##   3.action：处理异步任务，异步变更数据使用action，但是在action中还是要触发mutation的方式间接变更数据 ##

state: {
        // 所有的任务列表
        list: []
    },
    mutations: {
        initList (state, list) {
          state.list = list
        }
    },
    actions: {
        getList (context) {
          axios.get('/list.json').then(({ data }) => {
            console.log(data)
            context.commit('initList', data)
          })
        }
    },

界面上使用的两种方式：

1）this.$store.dispatch('getList')
    	
    	2）import { mapActions } from 'vuex'
    		
    	   methods:{
    	       ...mapActions (['getList'])
           }

##   4.getter：对store中的数据进行加工处理形成新的数据，但是并不会修改store中的数据 ##

getters: {
        // 统计未完成的任务数量
        unDoneLength (state) {
          return state.list.filter(x => x.done === false).length
        }
    }

界面上使用的两种方式：

1）this.$store.getters.unDoneLength 
    	
    	2）import { mapGetters } from 'vuex'
    		
    	   computed: {
    	        ...mapGetters(['unDoneLength'])
           }

# 总结 #

Vuex作为vue的核心插件，大家可以适当的用起来哈。