Vuex总结归纳

总结与归纳Vuex中的知识点

官方解释

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

相当于将需要跨组件的数据存放进vuex中，通过vuex共享出来，任何组件都可以使用

Vuex内有五大状态

state

公共数据源，用于存储所有的数据，类似于data

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export default new Vuex.Store({
  //数据，相当于data
  state: {
    count:'123'
  },
})

调用方法

1.标签中直接使用

<p>{{ $store.state.count }}</p>

2. 计算属性调用

computed:{
    count () {
        return this.$store.state.count
    }
}

3.辅助函数

import {mapState } from 'vuex'

mapState(['count'])

 

mutations

只有mutations才能修改state数据，且mutations必须是同步更新

const store  = new Vuex.Store({
  state: {
    count: 0
  },

  mutations: {
    // mutations里方法的第一个参数为state，第二个为payload可以传递参数
     addCount(state，payload) {
        state.count +=1
    }
  }
})

调用方法

1.原始形式

//mutations方法
addCount(state,payload) {
    state.count +=payload
}
//调用
this.$store.commit('addCount',10)

2.辅助函数

//调用
import {mapmutations} from 'vuex'
methods:{
    ...mapMutations(['addCount'])
}

//传参
<button @click='addCount(100)'></button>

actions

actions负责异步操作，通过调取mutations修改state数据

actions:{
    // context 相当于 this.store  ， payload用来传参
    // context.state获取状态  context.commit提交mutations  context.dispatch调用其它actions         
    getAddCount (context,payload) {
        setTime(function(){
        context.commit('addCount',payload)
        },100}
    }
}

 调用方法

1.原始调用

getAddCount() {
    this.$store.dispatch('getAddCount',123)
}

2.辅助函数

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAddCount'])
}

getters

直接处理state的数据，列斯与computed属性

  getters: {
     filterList:  state =>  {
         return state.list.filter(item => {
             return item > 5
         })
     }
  }

调用方式

1.原始调用

<p>{{$store.getters.filterList}}</p>

2.辅助函数

import { mapGetters }  from 'vuex'
computed: {
    ...mapGetters(['filterList'])
}

 

Module

当使用单一状态树时，所有的状态会集中到一个比较大的对象。当应用程序变得非常复杂是，store对象就可能变得臃肿

应用

定义模块化

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })

 使用模块化数据

<template>
  <div>
      <div>用户token {{ $store.state.user.token }}</div>
      <div>网站名称 {{ $store.state.setting.name }}</div>
  </div>
</template>