快速了解—Vuex基础应用

步骤一 前置条件

安装

npm install vuex --save

再src目录下创建store文件夹，并创建index.js

引入

再index.js中引入

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum (state) {
        return '当前最新值为：' + state.count
    }
  },
  mutations: {
    add (state, payload) {      // payload是方法参数
    }
  },
  actions: {
    addCount(context) {
      // 可以包含异步操作
      // context 是一个与 store 实例具有相同方法和属性的 context 对象
   }
  }
})

导出

export default store

入口文件里面引入store，然后再全局注入

import store from './store'//引入store
 
new Vue({
  el: '#app',
  router,
  store,// 使用store
  template: '<App/>',
  components: { App }
})

步骤二 概念介绍

state主要用于存放数据

全局挂载后，在script中使用时 可以通过this.$store.state.具体属性名

例如：

<script>
    console.log(this.$store.state.count)
</script>

打印输出结果为0

在插值中使用时不需要带this

<template>
    <p>{{ $store.state.count }}</p>
</template>

mutations是更改state初始状态的唯一合法方法，只要是涉及到state中值的更改的方法，都必须通过mutations来进行操作，并且mutations中只能存放同步方法。

使用方式

<script>
    methods: {
        add () {
           this.$store.commit('add', 1)
           this.$store.commit('mutations方法名', 值)
        }
    }
</script>

  mutations: {
    add (state, payload) {      // payload是方法参数
        state.count += payload
    }
  },

actions用于处理异步方法，当然更改state状态必须通过mutations。给action注册事件处理函数，当这个函数被触发时候，将状态提交到mutations中处理。actions里面自定义的函数接收一个context参数和要变化的形参

使用方式

<script>
    methods: {
        add () {
           setTimeout(() => {           
               this.$store.disptach('addTime', 3)
               this.$store.disptach('mutations方法名', 值)
             }, 1000)
         }     }
</script>


 actions: {
    addTime (context, payload) {      // payload是方法参数
        context.commit('add', payload)
    }
  },

  mutations: {
    add (state, payload) {      // payload是方法参数
        state.count += payload
    }
  },

getter可以对store中的数据进行加工处理形成新的数据，相当于vue中的computed计算属性，当然这个getter所形成的新的数据并不会更改state中的值。getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，Getters 可以用于监听、state中的值的变化，返回计算后的结果

<script>
    methods: {
        showNum () {
           this.$store.getters.showNum
         }
    }
</script>

getters: {
    showNum (state) {
        return '当前最新值为：' + state.count
    }
  },

处理以上的使用方式外，还用一种较为方便的方式使用state、mutations、actions、getters

<script>
    import {mapState,mapGetters,mapMutations，mapActions} from 'vuex'

    computed: {
        ...mapState('count'),
        ...mapGetters('showNum')
    }
    methods: {
        ...mapMutations('add', 1)
        ...mapActions('addTime', 1)
    }
</script>

在插值中使用mapState,可以不用再写this.$store.state，就相当于在当前组件中的data()中有一个count

<template>
    <p>{{ count }}</p>
</template>

同理使用mapGetters也是一样

<template>
    <p>{{ showNum }}</p></template>

使用mapMutations和mapActions时，就相当于在当前组件中的methods()中定义了对应方法

<script>
    import {mapState,mapGetters,mapMutations，mapActions} from 'vuex'

    computed: {
        ...mapState(['count']),,
        ...mapGetters(['showNum'])
    }
    methods: {
        ...mapMutations(['add']),
        ...mapActions(['addTime']),
        useMapMutations () {
            this.add()
        },
        useMapActions () {
            this.addTime()
        }
    }
</script>