vuex简单介绍1.0

最新推荐文章于 2024-04-04 08:00:00 发布

问风_1

最新推荐文章于 2024-04-04 08:00:00 发布

阅读量151

点赞数 1

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/Qqqqrr/article/details/109268083

版权

vue 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.Vuex是将一些经常使用的变量统一管理，如果想要的到某些变量，不用像传统数据传递逐级传递，只需要一级传递便可以的到数据。

2.Vuex在脚手架store文件夹中的index.js进行编写。

3.state：对公用数据进行保存

下面展示一些 内联代码片。

state: {
    count : 0
  }

count为自定义变量

4.mutations：只有mutations定义的函数才有资格修改state中的数据

add(state){
      state.count++
    }
addN(state,step){
      state.count += step
    }

5.actions：处理异步函数

 addAsync(context){
      setTimeout(() => {
        // 在actions中，不能直接修改state数据;
        //必须通过context.commit触发某个mutation才行
        context.commit('add')
      },1000)

6.组键得到store传来的数据

（1） $s t o r e . s t a t e . c o u n t : 利用$ store获取数据

$store.state.count

（2）引用mapState函数进行数据传递

<div>
	{{count}}
</div>
<script>
import {mapState} from 'vuex'
 computed:{
       ... mapState(['count'])
    }
</script>

7使用commit修改count的值，commit可以调用mutations

<div>
	<p> <button @click="btnHandler1">+1</button></p>
	 <p> <button @click="btnHandler2">+N</button></p>
</div>
<script>
	methods:{
		 btnHandler1(){
          this.$store.commit('add')
        },
          btnHandler2(){
            this.$store.commit('addN',3)
        }
}
</script>

8 mapState,mapMutations,mapActions,mapGetters应用

1.mapState:

<div>
	 {{count}} 
</div>
<script>
import {mapState} from 'vuex'
 computed:{
       ... mapState(['count'])
    }
</script>

2.mapMutations:

<div>
	 <p><button @click="sub">-1</button></p>
	  <p><button @click="subN">-N/button></p>
</div>
<script>
import {mapState} from 'vuex'
 methods:{
       . ...mapMutations(['sub','subN']),
    }
</script>

3.mapActions:

<div>
	 <p><button @click="subAsync">-1 Async</button></p>
	  <p><button @click="subNAsync">-N NAsync</button></p>
</div>
<script>
import {mapActions} from 'vuex'
 methods:{
       ...mapActions(['subAsync','subNAsync']),
    }
</script>

4.mapGetters:

<div>
	   {{showNum}}
</div>
<script>
import {mapActions} from 'vuex'
computed:{
         ...mapGetters(['showNum'])
    }
</script>

store.js代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count : 0,
  },
  // getters不会修改state中的数据，只起包装的作用
  getters:{
    showNum(state){
      return '当前最新的数量【'+ state.count +'】'
    }
  },
  //只有mutations定义的函数才有资格修改state中的数据
  mutations: {
    add(state){
      state.count++
    },
    addN(state,step){
      state.count += step
    },
    sub(state){
      state.count --
    },
    subN(state,step){
      state.count -= step
    }
  },
  actions: {
    // 处理异步函数
    addAsync(context){
      setTimeout(() => {
        // 在actions中，不能直接修改state数据;
        //必须通过context.commit触发某个mutation才行
        context.commit('add')
      },1000)
    },
    addNAsync(context,step){
      setTimeout(() =>{
        context.commit('addN',step)
      },1000)
    },
    subAsync(context){
      setTimeout(() => {
        context.commit('sub')
      })
    },
    subNAsync(context,step){
      setTimeout(() => {
        context.commit('subN',step)
      })
    }
  },
  modules: {
  }
})