Vue之vuex（状态管理）的使用

shi2022.11.10我学习了如何使用vuex。

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

例如：你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都是写，就会很麻烦，代码又臭又长。当然 如果没有大量的操作和数据需要在多个组件内使用的话呢，其实也就可以不用这个 Vuex了。

案例练习一

一、创建store文件

先引入vue和vuex，并且use它。

​
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

​

二、main.js引入store

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: function (h) { return h(App) }
}).$mount('#app')

三、开始编写store文件里面的index.js

（1）state（vuex的基本数据，用来存储变量）

// 要设置的全局访问的state对象
  state: {
    // 要设置的初始属性值
    count:0,
    // 不同的设置类型作对比
    ChangeShowCom:true
  },

在HelloWorld.vue页面中编写：

<template>
<div>
  <h1>我是从state上获得的{{this.$store.state.count}}</h1>
</div>
</template>
<script>

</script>
<style>

</style>

然后使用this.$store.state.count可以查看到state count里面的数据。 

效果如下：

 （2）getters（实时监听state值的变化，最新状态）

 // 实时监听state值的变化（最新状态）
  getters: {
    // 承载变化的count值
    getCount(state){
      return state.count
    },

    // 承载变化的showCom的值
    isShow(state){
      return state.ChangeShowCom
    }
  },

在HelloWorld.vue页面中编写：

 <h1>---------------------------------------------------</h1>
  <h1>getters</h1>
  <h1>我是从getters上获得的getCount方法:{{this.$store.getters.getCount}}</h1>
  <h1>我是从getters上获得的isShow方法:{{this.$store.getters.isShow}}</h1>

使用this.$store.getters.getCount获取到state里面的count值。

效果如下：

 getters的扩展：

改变count的值，需要提交mutation来修改。

在HelloWorld.vue页面中添加按钮和删除按钮：

<button @click="add">+</button>
  <button @click="del">-</button>

  <div v-show="isShow">{{count}}222</div>

引入vuex 

import {mapState,mapGetters,mapActions} from "vuex"

 data(){
    return{
      msg:"HelloWorld,I am mobile",
      count:''
    }

编写两个按钮的方法

 add(){
      this.$store.commit('addCount',1)
    },
    del(){
      this.$store.commit('delCount',1)
    },

（3）mutations（提交更新数据方法）

 mutations: {

    addCount(state,num){

      // 这里面的参数除了state之外还传了需要增加的值num
      state.count = state.count + num;

    },

    delCount(state,num){

      // count到0就不能减少了
      if(state.count>0){

        state.count = state.count - num

      }else {

        state.count = 0

      }
    },
    show(state){
      // 自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数（变量或对象）
      state.ChangeShowCom = true
    },
    hide(state){
      state.ChangeShowCom = false
    },
  },

效果如下：

添加按钮：

减少按钮： 

（4）actions（提交的是mutation，可以包含异步操作）

 actions: {
    getAddCount(context,num){
      // num为变化的形参
      context.commit('addCount',num)
    },

    getDelCount(context,num){
      context.commit('delCount',num)
    },

    hideCom(context){
      // 自定义触发muatations里面函数的方法，context与store实例具有相同方法和属性
      context.commit('hide')
    },
    showCom(context){
      context.commit('show')
    },
  },

在HelloWorld.vue页面中编写：

add() {
      // mutations的写法
      // this.$store.commit('addCount', 1)

      // actions的写法
      this.$store.dispatch('getAddCount', 1)
    },

    del() {
      // mutations的写法
      // this.$store.commit('delCount', 1)

      // actions的写法
      this.$store.dispatch('getDelCount', 1)
    },

效果如下：

添加按钮：

 减少按钮：

 （5）辅助函数（mapState,mapActions,mapGetters）

在HelloWorld.vue页面中编写：

  <h1>---------------------------------------------------</h1>
    <h1>mutations</h1>
    <h1>我是从...mapState扩展上获得的:{{ count1 }}</h1>
    <h1>我是从...mapGetter{{ getCount }}</h1>

import {mapState, mapActions, mapGetters} from "vuex";

使用计算方法以及扩展符使用。 

 computed:{
    ...mapGetters([
    'getCount',
      'isShow'
    ]),
    ...mapState({
      count1:state=>state.count
    })
  },

效果如下：

六、全部代码

(1)store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state:{
        count:0
    },
    getters:{
       receive(state){
           return state.count
       }
    },
    mutations:{
        addCount(state,num){
            state.count = state.count + num
        },
        delCount(state,num){
            state.count = state.count - num
        },
    },
    actions:{
        getAddCount(context,num){
            context.commit('addCount',num)
        },
        getDelCount(context,num){
            context.commit('delCount',num)
        },
    },
    modules:{

    }
})

(2)HelloWorld.vue

<template>
  <div>
    <h1>我是state的数据{{this.$store.state.count}}</h1>
    <h1>我是getters的方法{{this.$store.getters.receive}}</h1>



    <h1>我是...mapState扩展{{count111}}</h1>
    <h1>我是getters的方法{{receive}}</h1>


    <button @click="add">+</button>
    <button @click="del">-</button>
  </div>
</template>
<script>
import {mapState,mapGetters,mapActions} from 'vuex'
export default {
  data(){
    return{

    }
  },
  computed:{
    ...mapState({
      count111:state => state.count
    }),
    ...mapGetters([
        'receive'
    ])
  },
  methods:{
    add(){
      // mutations的方法
      // this.$store.commit('addCount',1)
      // actions的方法
      this.$store.dispatch('getAddCount',1)
    },
    del(){
      // mutations的方法
      // this.$store.commit('delCount',1)
      // actions的方法
      this.$store.dispatch('getDelCount',1)
    }
  }
}
</script>