Vue巩固-vuex

vuex的基本使用

1.安装
2.创建store.js，在store.js中引入vue和vuex,实例化vuex，vue.use(vuex)使用vuex插件。
3.在main.js中引入store.js,把store作为参数实例化。
1.安装

npm install vuex -S

2.store.js

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

export default new Vuex.Store ({
  state: {
    count: 0
  },
  mutations: {

  },
  actions: {

  }
})

3.main.js

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App),
}).$mount('#app')

概念理解（重要）

• state：提供唯一的公共数据源，所有共享的数据都要统一放到Store的state进行存储。
• Mutation用于变更Store中的数据。
  1. 只能通过mutation 变更Store数据，不可以直接操作Store中的数据。
  2. 通过这种方式虽然操作起来稍微繁琐一些，但可以集中监控所有数据的变化。
• Action用于处理异步任务。
  如果通过异步操作变更数据，必须通过Action，而不能使用Mutation，但是在Action中还是要通过触发Mutation 的方式间接变更数据。
  注意不要看到state与mutations有mutate，其实还是commit来调用mutations中的方法

目录

state演示

1.App.vue

<template>
  <div id="app">
    <Addition />
    <Subtraction />
  </div>
</template>

<script>
import Addition from './components/Addition.vue'
import Subtraction from './components/Subtraction'

export default {
  name: 'App',
  components: {
    Addition,
    Subtraction
  }
}
</script>

这个文件无需关注，只是把演示组件挂到这里而已
2.Addition.vue

<template>
  <div>
    <h3>当前最新的count值为：{{this.$store.state.count}}</h3>
    <h3>当前最新的count值为：{{count}}</h3>
    <button >+1</button>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Addition',
  data () {
    return {}
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

这里演示了两种获取state中数据的方式

this.$store.state.全局数据名称

// 1.从vuex中按需导入mapstate 函数
import { mapState } from 'vuex'
// 2.将全局数据，映射为当前组件的计算属性
computed: {
  ...mapState(['count'])
}

这里的…为es6的扩展运算符，用于将全局数据count映射为当前组件计算属性。

mutations

store.js

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

export default new Vuex.Store ({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    }
  },
  actions: {

  }
})

在mutations中声明了两个方法，注意参数个数不同

Addtion.vue

<template>
  <div>
    <h3 >当前最新的count值为：{{this.$store.state.count}}</h3>
    <h3>当前最新的count值为：{{count}}</h3>
    <button @click="btnAdd1()">+1</button>
    <button @click="btnAdd2()">+1</button>
    <button @click="btnAdd3()">+1</button>
  </div>
</template>

<script>
import { mapState,mapMutations } from 'vuex'
export default {
  name: 'Addition',
  data () {
    return {}
  },
  methods: {
     ...mapMutations(['add','addN']),
    btnAdd1 () {
      this.$store.commit('add')
    },
    btnAdd2 () {
      this.add()
    },
    btnAdd3 () {
      this.addN(5)
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

触发mutations的两种方式

 this.$store.commit('mutations中方法')

// 1.导入mapMutations
import { mapState,mapMutations } from 'vuex'
// 2.使用es6扩展运算符把方法映射为当前组件方法
 ...mapMutations(['add','addN'])

actions

Addition.vue

<template>
  <div>
    <h3 >当前最新的count值为：{{this.$store.state.count}}</h3>
    <h3>当前最新的count值为：{{count}}</h3>
    <button @click="btnAdd1()">+1</button>
    <button @click="btnAdd2()">+1</button>
    <button @click="btnAdd3()">+5</button>
    <button @click="btnAdd4()">+1</button>
    <button @click="btnAdd5()">+1</button>
  </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  name: 'Addition',
  data () {
    return {}
  },
  methods: {
     ...mapMutations(['add','addN']),
    //  触发mutations的方法
    btnAdd1 () {
      this.$store.commit('add')
    },
    btnAdd2 () {
      this.add()
    },
    btnAdd3 () {
      this.addN(5)
    },
    // 触发actions的方法
    btnAdd4 () {
      this.$store.dispatch('addAsync')
    },
    ...mapActions({
      btnAdd5: 'addAsync'
    })
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

store.js

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

export default new Vuex.Store ({
  state: {
    count: 0
  },
  mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      state.count += step
    }
  },
  actions: {
    // 传递一个参数
    addAsync (context) {
      setTimeout ( () => {
        context.commit('add')
      },1000)
    }
  }
})