Vue使用Vuex

迷南。 2023-06-01 11:29 125阅读 0赞

## 1.首先安装Vuex依赖 ##

打开cmd，切换到vue项目目录下

cnpm install  vuex --save

安装完成

## 2.使用vuex state ##

> state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。

打开vue项目，在src下新建一个store的文件夹  
在store文件夹下面新建一个index.js文件  
index.js文件内容

import Vue from 'vue'
    import Vuex from 'vuex'
    // 使用vuex
    Vue.use(Vuex)
    // 创建vuex实例
    const store = new Vuex.Store({
      // vuex数据源,保存的数据存储在这里，在页面通过this.$store.state.count获取count
      state: {
        count: 0
      },
    // 导出store
    export default store
    /* export default new Vuex.Store({
      state: {
      },
      actions: {
      },
      // action,
      mutations: {
      },
      getters: {
      }
    }) */

在main.js中导入store文件夹

import store from './store'

new Vue({
      el: '#app',
      router,
      store,
      components: {
        App
      },
      template: '<App/>'
    })

新建一个vue组件  
testVuex.vue

<template>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24">
              <h2>{
       {'从state获取count:' + this.$store.state.count}}</h2>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>

在router/index.js中

{
          path: '/testVuex',
          name: 'testVuex',
          component: testVuex
        }

打开浏览器输入 http://127.0.0.1:8080/\#/testVuex  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]

## 2.vuex getter ##

> getters：state对象读取方法。Vue Components通过该方法读取全局state对象。

在store/index.js

testVuex.js

<template>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24">
              <h2>{
       {'从state获取count:' + this.$store.state.count}}</h2>
            
              <h2>{
       {'从getters获取到的计算的值' + this.$store.getters.getStateCounts}}</h2>
        
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]

## 3.vue mutations ##

> mutations：状态改变操作方法。是Vuex修改state的唯一推荐方法，其他修改方式在严格模式下将会报错。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。  
> commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。

store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    // 使用vuex
    Vue.use(Vuex)
    // 创建vuex实例
    const store = new Vuex.Store({
      // vuex数据源,保存的数据存储在这里，在页面通过this.$store.state.count获取count
      state: {
        count: 0
      },
      /* Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，
      Getters 可以用于监听、state中的值的变化，返回计算后的结果 */
      getters: {
        getStateCounts: function (state) {
          return state.count + 1
        }
      },
      mutations: {
        adds (state) {
          state.count += 1
        },
        reductions (state, n1) {
          state.count -= n1
        }
      }
    }
    // 导出store
    export default store

testVuex.js

<template>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24">
              <h2>{
       {'从state获取count:' + this.$store.state.count}}</h2>
              
              <h2>{
       {'从getters获取到的计算的值' + this.$store.getters.getStateCounts}}</h2>
              
                <el-button-group>
                 <el-button @click="addFunc">通过mutations方式增加count</el-button>
                   </el-button-group>
                   <br>
                   <el-button-group>
                     <el-button @click="reductionFunc">通过mutations方式减小count</el-button>
                   </el-button-group>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>
    
    <script>
    export default {
      name: 'testVuex',
      methods: {
        addFunc () {
          this.$store.commit('adds')
        },
        reductionFunc () {
          this.$store.commit('reductions', 10)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

增加count  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 2]  
减小count (-10)  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 3]

## 4.vue actions ##

> actions：操作行为处理模块。负责处理Vue  
> Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。

> dispatch：操作行为触发方法，是唯一能执行action的方法。

store/index.js

import Vue from 'vue'
    import Vuex from 'vuex'
    // 使用vuex
    Vue.use(Vuex)
    // 创建vuex实例
    const store = new Vuex.Store({
      // vuex数据源,保存的数据存储在这里，在页面通过this.$store.state.count获取count
      state: {
        count: 0
      },
      /* Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，
      Getters 可以用于监听、state中的值的变化，返回计算后的结果 */
      getters: {
        getStateCounts: function (state) {
          return state.count + 1
        }
      },
      mutations: {
        adds (state) {
          state.count += 1
        },
        reductions (state, n1) {
          state.count -= n1
        }
      },
      actions: { // 注册actions,类似vue里面的methods
        addFuncs (context) {
          context.commit('adds')
        },
        reductionFuncs (context, n) {
          context.commit('reductions', n)
        }
      }
    })
    // 导出store
    export default store

testVuex.js

<template>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24">
              <h2>{
       {'从state获取count:' + this.$store.state.count}}</h2>
              
              <h2>{
       {'从getters获取到的计算的值' + this.$store.getters.getStateCounts}}</h2>
              
                <el-button-group>
                 <el-button @click="addFunc">通过mutations方式增加count</el-button>
                   
                     <el-button @click="addFunc3">通过actions方式增加count</el-button>
                
                   </el-button-group>
                   <br>
                   <el-button-group>
                     <el-button @click="reductionFunc">通过mutations方式减小count</el-button>
                  
                     <el-button @click="reductionFunc3">通过actions方式减小count</el-button>
                 
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>
    
    <script>
    
    export default {
      name: 'testVuex',
     
      methods: {
        addFunc () {
          this.$store.commit('adds')
        },
        addFunc3 () {
          this.$store.dispatch('addFuncs')
        }
        reductionFunc () {
          this.$store.commit('reductions', 10)
        
        },
        reductionFunc3 () {
          var n = 10
          this.$store.dispatch('reductionFuncs', n)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

count+1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 4]  
count -10  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 5]  
5.使用mapState mapMutations mapGetters mapActions  
this. s t r o r e . s t a t e . c o u n t t h i s . strore.state.count this. strore.state.countthis.store.getters.getStateCounts  
在computed中

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

访问count和getters中的getStateCount

<h2>{
       {'使用mapState获取count' + count1}}</h2>
    <h2>{
       {'使用mapGetters获取getStateCount' + getStateCounts}}</h2>

this. s t o r e . c o m m i t ( ′ r e d u c t i o n s ′ , 10 ) t h i s . store.commit('reductions', 10) this. store.commit(′reductions′,10)this.store.dispatch(‘funName’)

methods: {
        ...mapMutations([
          'adds',
          'reductions'
        ]),
        ...mapActions({
          addFuncAction: 'addFuncs',
          reductionAction: 'reductionFuncs'
        })
        
        addFunc4 () {
          this.addFuncAction()
        },
         addFunc4 () {
          this.addFuncAction()
        },
         reductionFunc2 () {
          this.reductions(10)
        }
         reductionFunc4 () {
          var n = 10
          this.reductionAction(n)
        }

完整testVuex.vue

<template>
      <el-container>
        <el-main>
          <el-row>
            <el-col :span="24">
              <h2>{
       {'从state获取count:' + this.$store.state.count}}</h2>
              <h2>{
       {'使用mapState获取count' + count1}}</h2>
              <h2>{
       {'从getters获取到的计算的值' + this.$store.getters.getStateCounts}}</h2>
              <h2>{
       {'使用mapGetters获取getStateCount' + getStateCounts}}</h2> 
                <el-button-group>
                 <el-button @click="addFunc">通过mutations方式增加count</el-button>
                     <el-button @click="addFunc2">通过mapMutations方式增加count</el-button>
                     <el-button @click="addFunc3">通过actions方式增加count</el-button>
                     <el-button @click="addFunc4">通过mapActions方式增加count</el-button>
                   </el-button-group>
                   <br>
                   <el-button-group>
                     <el-button @click="reductionFunc">通过mutations方式减小count</el-button>
                      <el-button @click="reductionFunc2">通过mapMutation方式减小count</el-button>
                     <el-button @click="reductionFunc3">通过actions方式减小count</el-button>
                     <el-button @click="reductionFunc4">通过mapActions方式减小count</el-button>
                   </el-button-group>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
    </template>
    
    <script>
    // import {mapAcctions, mapState, mapGetters} from'vuex'
    import {mapActions, mapState, mapGetters, mapMutations} from 'vuex'
    export default {
      name: 'testVuex',
      computed: {
        ...mapState({
          count1: state => state.count
        }),
        ...mapGetters([
          'getStateCounts'
        ])
      },
      methods: {
        ...mapMutations([
          'adds',
          'reductions'
        ]),
        ...mapActions({
          addFuncAction: 'addFuncs',
          reductionAction: 'reductionFuncs'
        }),
        addFunc () {
          this.$store.commit('adds')
        },
        addFunc2 () {
          this.adds()
        },
        addFunc3 () {
          this.$store.dispatch('addFuncs')
        },
        addFunc4 () {
          this.addFuncAction()
        },
        reductionFunc () {
          this.$store.commit('reductions', 10)
          // this.reductions(10)
          /* var n = 10
          this.$store.dispatch('reductionFunc', n) */
        },
        reductionFunc2 () {
          this.reductions(10)
        },
        reductionFunc3 () {
          var n = 10
          this.$store.dispatch('reductionFuncs', n)
        },
        reductionFunc4 () {
          var n = 10
          this.reductionAction(n)
        }
      }
    }
    </script>
    
    <style scoped>
    
    </style>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 6]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70]: /images/20230601/797b090d8e084e75889357c4d62f317a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/b645d85253014d74af5c9311d7ad2b55.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 2]: /images/20230601/584799e6a8324131a0d46d6379f8c7a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 3]: /images/20230601/9054ffbe600d46dbb4f27e6e613c19d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 4]: /images/20230601/ba71eb62dd0d43fa89edef8573baa2aa.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 5]: /images/20230601/55a3d24b800646e780bb8eee72ad2b6a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3JqMjAxNzIxMTgxMQ_size_16_color_FFFFFF_t_70 6]: /images/20230601/2ebca5b13ab64ddb9ff0e3123f76cb51.png