Vue使用Vuex

最新推荐文章于 2024-06-18 22:29:23 发布

I like study.

最新推荐文章于 2024-06-18 22:29:23 发布

阅读量182

点赞数 1

分类专栏： # Vue 文章标签： Vue Vuex

本文链接：https://blog.csdn.net/rj2017211811/article/details/101985723

版权

Vue 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

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
在这里插入图片描述

2.vuex getter

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

在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
    }
  }
}  
// 导出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-col>
      </el-row>
    </el-main>
  </el-container>
</template>

在这里插入图片描述

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>{{'使用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-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
在这里插入图片描述
减小count (-10)

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>{{'使用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="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
在这里插入图片描述
count -10

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 .$ 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.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>

在这里插入图片描述

I like study.

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue使用Vuex

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

扫一扫

专栏目录