Vuex学习_java_内存溢出

Vuex

state
mutation
action
getter
module

state

vuex 是一个专门为vue.js应用程序开发的状态管理模式。

这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。

也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。

官网：https://vuex.vuejs.org/zh/guide/

Vuex中，有默认的五种基本的对象：

state：存储状态（变量）

虽然state和data有很多相似之处,但state在使用的时候一般被挂载到子组件的computed计算属性上,这样有利于state的值发生改变的时候及时响应给子组件.如果你用data去接收store.state,当然可以接收到值,但由于这只是一个简单的赋值 *** 作,因state中的状态改变的时候不能被vue中的data监听到,当然可以通过watch监听$store去解决这个问题,那你就一个妥妥的杠精
mapState

创建store:

//index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  count:0,
  name:'hello',
  age:19
};
export default new Vuex.Store({
  state,
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

使用state：

<template>
  <div id="app">
       <h1>{{$store.state.count}}</h1> <!--直接使用模板 -->
       <h1>{{dataCount}}</h1>
       <h1>{{count}}</h1>
       <h1>{{name}}</h1>
        <h1>{{age}}</h1>
  </div>
</template>
<script>

import {mapState} from "vuex";//导入mapState
export default{
   name:'App',
  components:{
  },
  data(){
   return{
     dataCount:this.$store.state.count//直接赋值时到data
   }
  },
  methods:{
    
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count;//state发生改变，使用计算属性来接受，如果接收的转态是一个，使用本条例子，如果是多个，使用mapState来接收
  //   }
  // }
  computed:mapState({
    count:"count",
    name:(State)=>{
      return State.name;
    },
    age:function(){
      return 2+this.$store.state.age;
    }
  })
}

</script>

<style lang="less">

</style>

结果：

mutation

mutation：修改状态，并且是同步的。在组件中用$store.commit("handle’',params)。这个和我们组件中的自定义事件类似。
mapMutations
在store中加入mutations：

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

Vue.use(Vuex)

const state={
  count:0,
  name:'hello',
  age:19
};
const getters={
   todoCount(state){
     return state.count+3;
   }
};
const mutations={
  add(state,n=0){
    return (state.count+=n);
  }
}
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions: {
  },
  modules: {
  }
})

<template>
  <div id="app">
       <h1>{{$store.state.count}}</h1> <!--直接使用模板 -->
       <h1>{{dataCount}}</h1>
       <h1>{{count}}</h1>
       <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <h1>{{todoCount}}</h1>
        <button @click="add(2)">+</button>
  </div>
</template>
<script>

import Child from './Child.vue';
import {mapState,mapGetters,mapMutations} from "vuex";//导入mapState
export default{
   name:'App',
  components:{
      Child
  },
  data(){
   return{
     dataCount:this.$store.state.count//直接赋值时到data
   }
  },
  methods:{
     ...mapMutations(["add"]),
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count;//state发生改变，使用计算属性来接受，如果接收的转态是一个，使用本条例子，如果是多个，使用mapState来接收
  //   }
  // }
  computed:mapState({
    count:"count",
    name:(State)=>{
      return State.name;
    },
    age:function(){
      return 2+this.$store.state.age;
    },
    ...mapGetters(['todoCount']),
  })
}

</script>

<style lang="less">

</style>

结果：
点击按钮之前：

点击按钮之后：

action

action：异步 *** 作。在组件中使用是$store.dispath("handle’',params)
mapActions

在store中加入actions:

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

Vue.use(Vuex)

const state={
  count:0,
  name:'hello',
  age:19
};
const getters={
   todoCount(state){
     return state.count+3;
   }
};
const mutations={
  add(state,n=0){
    return (state.count+=n);
  }
};
const actions={
  addAsyc({commit},n=0){
    setTimeout(()=>{
      commit('add',n);
    },1000);
  }
}
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
  }
})
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state={
  count:0,
  name:'hello',
  age:19
};
const getters={
   todoCount(state){
     return state.count+3;
   }
};
const mutations={
  add(state,n=0){
    return (state.count+=n);
  }
};
const actions={
  addAsyc({commit},n=0){
    setTimeout(()=>{
      commit('add',n);
    },1000);
  }
}
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  modules: {
  }
})

<template>
  <div id="app">
       <h1>{{$store.state.count}}</h1> <!--直接使用模板 -->
       <h1>{{dataCount}}</h1>
       <h1>{{count}}</h1>
       <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <h1>{{todoCount}}</h1>
        <button @click="addAsyc(2)">+</button>
  </div>
</template>
<script>

import Child from './Child.vue';
import {mapState,mapGetters,mapMutations,mapActions} from "vuex";//导入mapState
export default{
   name:'App',
  components:{
      Child
  },
  data(){
   return{
     dataCount:this.$store.state.count//直接赋值时到data
   }
  },
  methods:{
     ...mapMutations(["add"]),
     ...mapActions(['addAsyc'])
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count;//state发生改变，使用计算属性来接受，如果接收的转态是一个，使用本条例子，如果是多个，使用mapState来接收
  //   }
  // }
  computed:mapState({
    count:"count",
    name:(State)=>{
      return State.name;
    },
    age:function(){
      return 2+this.$store.state.age;
    },
    ...mapGetters(['todoCount']),
  })
}

</script>

<style lang="less">

</style>

结果为：点击按钮，延迟1s后数值+1.

getter

getter：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $store.getters.fn
mapGetters

在store中加入getters：

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

Vue.use(Vuex)

const state={
  count:0,
  name:'hello',
  age:19
};
const getters={
   todoCount(state){
     return state.count+3;
   }
};
export default new Vuex.Store({
  state,
  getters,
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

使用getters:

<template>
  <div id="app">
       <h1>{{$store.state.count}}</h1> <!--直接使用模板 -->
       <h1>{{dataCount}}</h1>
       <h1>{{count}}</h1>
       <h1>{{name}}</h1>
        <h1>{{age}}</h1>
        <h1>{{todoCount}}</h1>
  </div>
</template>
<script>

import Child from './Child.vue';
import {mapState,mapGetters} from "vuex";//导入mapState
export default{
   name:'App',
  components:{
      Child
  },
  data(){
   return{
     dataCount:this.$store.state.count//直接赋值时到data
   }
  },
  methods:{
    
  },
  // computed:{
  //   count(){
  //     return this.$store.state.count;//state发生改变，使用计算属性来接受，如果接收的转态是一个，使用本条例子，如果是多个，使用mapState来接收
  //   }
  // }
  computed:mapState({
    count:"count",
    name:(State)=>{
      return State.name;
    },
    age:function(){
      return 2+this.$store.state.age;
    },
    ...mapGetters(['todoCount']),
  })
}

</script>

<style lang="less">

</style>