VueX的五种属性

Posted 2023-04-19

参考技术A Vuex有五个核心概念：

1、state：vuex的基本数据，用来存储变量(后四个属性都是用来操作state里面储存的变量的)。

2、getters：是对state里面的变量进行过滤的。

3、mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)。

4、action：和mutation的功能大致相同，不同之处在于：

            1.Action提交的是mutation，而不是直接变更状态。  也就是action是用来修改mutation并提交的  而  mutation是通过修改state

             2.Action可以包含任意异步操作。(一般比较复杂的数据都在action中操作)

             3.action先会执行异步操作再去调用mutation，随后才跟新state

5、modules：项目特别复杂的时候，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

dispatch：是跟action一块用的，含有异步操作，例如向后台提交数据，写法： this.$store.dispatch('mutation的方法名',获取值)

commit：是跟mutation一块用的，同步操作 ，写法： this.$store.commit('mutation的方法名',获取值)

vuex 详解

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

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

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

  核心原理图：

   

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

       state：存储状态（变量）

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

       mutations：修改状态，并且是同步的。在组件中使用$store.commit(‘‘,params)。这个和我们组件中的自定义事件类似。

       actions：异步操作。在组件中使用是$store.dispath(‘‘)

       modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。

 示例：

   vuex页面：

    

  About页面：

    

    

  效果页面：

   

  也可以使用es6的扩展运算符。。。

 <script>

import {mapState, mapMutations, mapActions, mapGetters} from ‘vuex‘  //首先引入vuex数据、方法
export default {
  name: ‘HelloWorld‘,
  data () {
    return {
      msg: ‘Welcome to Your Vue.js App‘
    }
  },
  methods: { //...mapMutations 和 ...mapActions在vue的methods方法中引入

     ...mapMutations({ AddCount: ‘AddCount‘, ReduceCount: ‘ReduceCount‘ }), 
     ...mapActions({ handleActionsAdd: ‘actionsAddCount‘, handleActionsReduce: ‘actionsReduceCount‘ })
   }, 
  computed: { 
     count(){//vuex的mapState和getters计算属性 在compute引入 

       ...mapState([‘count’])
       ...mapGetters([‘’])

     } 
  }
 }

 </script>