Vue笔记：Vuex

Vuex

官方文档：https://vuex.vuejs.org/zh/guide/

Vuex是一个专门为Vue.js应用程序开发的状态管理模式, 它采用集中式存储管理所有组件的公共状态, 并以相应的规则保证状态以一种可预测的方式发生变化.

Vuex核心

• state：存放数据状态
• mutations：定义对state成员的同步操作
• getters ：定义state成员的计算属性给外界
• actions：定义对state成员的异步操作，其实依赖mutations
• modules：模块化的状态管理

state就是Vuex中的公共的状态, 我是将state看作是所有组件的data, 用于保存所有组件的公共数据.

getters属性理解为所有组件的computed属性, 也就是计算属性. vuex的官方文档也是说到可以将getter理解为store的计算属性, getters的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

mutaions理解为store中的methods, mutations对象中保存着更改数据的回调函数,该函数名官方规定叫type, 第一个参数是state, 第二参数是payload, 也就是自定义的参数.

actions 类似于 mutations，不同在于：

• actions提交的是mutations而不是直接变更状态

• actions中可以包含异步操作, mutations中绝对不允许出现异步

• actions中的回调函数的第一个参数是context, 是一个与store实例具有相同属性和方法的对象

Modules：应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

快速使用

1、初始化store下index.js中的内容

import Vue from 'vue'
import Vuex from 'vuex'
//挂载Vuex
Vue.use(Vuex)

export default new Vuex.Store({
  //定义初始值
  state: {
    count:0,
  },
  getters:{
    doubleCount(state){
      return state.count * 2
    }
  },
  //定义同步的方法
  mutations: {
    add(state){
      state.count ++
    },
    decrese(state){
      state.count --
    },
  },
  //定义异步的方法
  actions: {
    delayadd(context){
      setTimeout(() => {
          context.commit('add')
        },1000);
    }
  },
  modules: {
  }
})

2、将store挂载到当前项目的Vue实例当中去

main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,  //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中
  render: h => h(App)
})

3、在组件中使用Vuex

<template>
    <div id="app">
        <h1>vuex count:{{ count }}</h1>
        <h1>vuex doubleCount:{{ doubleCount }}</h1>
        <button @click="add">add count</button>
        <button @click="delayadd">delayaddadd count</button>
        <button @click="decrese">decrese count</button>
    </div>

</template>


<!--1.引入组件-->
<!--2.挂载组件-->
<!--3.在模板中使用-->
<script>
    import { mapState,mapGetters } from 'vuex'
    export default {
        computed:{
            ...mapState({
            count : 'count',
            }),
            ...mapGetters([
             'doubleCount',
            ]),
        },
      methods:{
           add(){
                this.$store.commit('add')
           },
           decrese(){
                this.$store.commit('decrese')
           },
           delayadd(){
                this.$store.dispatch('delayadd')
           },
        }
}
</script>

<style  scoped>

</style>

总结

store定义初始值与计算方法

 //定义初始值
  state: {
    count:0,
  },
  getters:{
    doubleCount(state){
      return state.count * 2
    }
  },

store定义同步方法与异步方法

//定义同步的方法
  mutations: {
    add(state){
      state.count ++
    },
    decrese(state){
      state.count --
    },
  },
  //定义异步的方法
  actions: {
    delayadd(context){
      setTimeout(() => {
          context.commit('add')
        },1000);
    }
  },

在组件的Vue实例中引入store数据

import { mapState,mapGetters } from 'vuex'
computed:{
            ...mapState({
            count : 'count',
            }),
            ...mapGetters([
             'doubleCount',
            ]),
},

在组件的模板中显示stote数据与计算属性

<h1>vuex count:{{ count }}</h1>
<h1>vuex doubleCount:{{ doubleCount }}</h1>

触发同步方法

<button @click="add">add count</button>
<button @click="decrese">decrese count</button>

 methods:{
           add(){
                this.$store.commit('add')
           },
           decrese(){
                this.$store.commit('decrese')
           },
        }

触发异步方法

<button @click="delayadd">delayaddadd count</button>


 methods:{
           delayadd(){
                this.$store.dispatch('delayadd')
           },
        }