深入理解Vuex

什么是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的核心插件，大家可以适当的用起来哈。