【Vuex的基本操作使用】

Vuex的基本操作使用

 

一、创建vuex

首先最简单的方法就是在创建vue3项目时直接勾选vuex，会自动配置好，

二、state使用

在store中的index.js内。

state是专门用来存放的全局数据，相当于组件中的data。

import { createStore } from 'vuex'

export default createStore({
  state: {
    number: 333
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

 模板中使用

<div>
    <h2 style="color: white">数字:{{ $store.state.number }}</h2>
  </div>

 页面展示效果

二、getters使用 

将组件中统一使用的computed都放到getters里面来操作

import { createStore } from 'vuex'

export default createStore({
  state: {
    number: 333
  },
  getters: {
    getNum(state) {
      return state.number
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

返回state的值

 

<div>
    <h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
  </div>

 实现效果

三、mutations使用

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

但是不能使用异步方法。

import { createStore } from 'vuex'

export default createStore({
  state: {
    number: 333
  },
  getters: {
    getNum(state) {
      return state.number
    }
  },
  mutations: {
    increase(state, payload) {
      state.number += payload ? payload : 1;
    }
  },
  actions: {
  },
  modules: {
  }
})

 

模板中使用

<div>
    <h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
    <button @click="$store.commit('increase', 1)">点击加1</button>
  </div>

实现效果

四、actions

actions是store中专门用来处理异步的，但是要修改状态的话，还是mutations

import { createStore } from 'vuex'

export default createStore({
  state: {
    number: 333
  },
  getters: {
    getNum(state) {
      return state.number
    }
  },
  mutations: {
    increase(state, payload) {
      state.number += payload ? payload : 1;
    },
    Sub(state) {
      state.number--;
    }
  },
  actions: {
    decreaseAsync(context) {
      context.commit('Sub')
    }
  },
  modules: {
  }
})

 模板中

<div>
    <h2 style="color: white">数字:{{ $store.getters.getNum }}</h2>
    <button @click="$store.commit('increase', 1)">点击加1</button>
    <button @click="$store.dispatch('decreaseAsync')">点击延迟减1</button>
  </div>

 页面展示

五、modules

我们的store可以认为是一个主模块，它下边可以分解为很多子模块，子模块都可以单独领出来写，写完再导入到主模块中。

---

 

export const MUTATIONS_TYPE = {
    INCREASE: 'increase',
    DECREASE: 'decrease'
}

export default {
    // 让num累加
    // payload是一个形参，如果组件在commit时，有传这个参数过来，就存在，如果没有传过来，就是undefined
    [MUTATIONS_TYPE.INCREASE](state, payload){
        state.num += payload ? payload : 1;
    },
    // 让num累减
    [MUTATIONS_TYPE.DECREASE](state){
        state.num--;
    }
}

 模板中

<template>
  <div class="about">
    <h2>About页面的数字：{{getNum}}</h2>
    <button @click="increase()">About的按钮，点击加1</button>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from 'vuex'
import { MUTATIONS_TYPE } from '@/store/mutaions_type.js'
export default {
  computed: {
    ...mapGetters(['getNum'])
  },
  methods: {
    // 方法一：
    ...mapMutations([MUTATIONS_TYPE.INCREASE])
      
    // 方法二：
    /* increase(){
      this.$store.commit(MUTATIONS_TYPE.INCREASE)
    } */
  }
}

 如果大家有更好的建议，请大家评论区探讨