Vuex的使用

骑猪看日落 2021-11-09 20:00 338阅读 0赞

(。^。) 来扯一扯Vuex呗~

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

## 一．什么情况下使用vuex? ##

1.  多个视图依赖于同一状态
2.  来自不同视图的行为需要变更同一状态

## 二．Vuex核心概念 ##

1.**store**（仓库）：就是一个容器，它包含着应用中大部分的状态；状态存储是响应式的；不能直接改变store中的状态

2.**state**（状态）：定义应用的单一状态树，用一个对象就包含了全部的应用层级状态

3.**getter**（派分的状态）：抽离操作状态的逻辑，可被多组件使用

4.**mutation**（修改状态的唯一途径）：要使改变状态可被记录，必须要commit一个mutation；mutation必须是同步更新状态

4.**action**（异步操作）：异步操作产生结果；action提交的是mutation，而不是直接变更状态

## 三．例子 ##

### 1.想要改变state，必须提交mutation ###

import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const state = {
      count:100
    }
    const mutations = {
      updateCount (state) {
        state.count += 1
      }
    }
    const store = new Vuex.Store({
      state,
      mutations
    })
    export default store;

调用handleUpdate方法进行改变

handleUpdate(){
      this.$store.commit('updateCount')
    }

### 2.获取state中的值 ###

（1）存在data中。存在data中的数据，当调用handleUpdate方法时，值不会改变，因此一般不使用此方法获取

data () {
      return{
        n:this.$store.state.count
      }
    },

（2）直接获取

<h2>直接获取：{
       {$store.state.count}}</h2>

（3）通计算属性获取

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

### 3.传值 ###

推荐对象的写法，有利于扩展

handleUpdate(){
      this.$store.commit('updateCount',{
        add:2
      })
    }

const mutations = {
      updateCount (state,payload) {
        state.count += payload.add
      }
    }

### 4.getters实时监听state的变化 ###

就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有它的依赖值发生改变才会被重新计算

getters : {
      totals (state) {
        return state.shopList.reduce((n,item)=>n+item.count,0)
      }
    },

<h2>统计总数：{
       {$store.getters.totals}}</h2>

### 5．action异步操作 ###

add(id){
      this.$store.dispatch('updateCountAction',{
        id
      })
    }

const actions = {
      updateCountAction(context,params){
        //异步操作放这里
        setTimeout(() => {
          context.commit('updateCountById',params)
        },3000)
      }
    }

还是通过mutaion，而不是直接变更状态

const mutations = {
      updateCountById(state,payload){
        state.count += payload.id
      }
    }