vuex笔记整理

vuex是一个vue\de状态管理工具（状态即数据）。状态管理就是集中管理vue中通用的一些数据（多组件均需要共享的数据）

例如：用户信息是全体组件之间共享的

创建仓库 store/index.js

导入vue,在mian.js内写入

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

Vue.config.productionTip = false

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

在 store/index.js中写入

// 和仓库相关的逻辑 都写在index。js中
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 创建仓库(创建了一个空仓库)
const store = new Vuex.Store({
// state状态可以用于提供数据 类似vue组件中的data
// 和data的区别在于 data是组件自己的数据 state是整个项目所有组件共享的数据
  state: {
    count: 100
  },
  mutations: {
    addOne (state) {
      state.count++
    },
    addN (state, value) {
      state.count += value
    },
    subOne (state) {
      state.count--
    },
    subN (state, value) {
      state.count -= value
    }
  },
  strict: true
})

export default store

如何在组件中获取count?

①插值表达式{{￥store.state.count}}

注意要获取仓库的数据先要找到仓库

到了仓库才能拿到仓库的数据

如何获取到仓库？联想如何获取路由

this.$router(在组件实例中)

router（在js中，记得先引包）

同理可得

获取仓库就话就是

this.$store(在组件实例中)

{{$store.state.count}}

store （在js中，记得先引包）

辅助函数可以快速生成计算属性，从而调用仓库里面的数据

mapState 是一个辅助函数，可以映射state状态，可以生成计算属性

import AddItem from './components/add-item.vue'
import SubItem from './components/sub-item.vue'
import { mapState } from 'vuex'

export default {
  name: 'app',
  computed: {
    ...mapState(['count'])
  },
  components: {
    AddItem,
    SubItem
  }
}

解决computed被占死，无法提供自己组件组件内的计算属性问题

用...展开

如何修改仓库里面的数据？

this.$store.state.count++ 可用，但是是错误的

在严格模式下会报错，因为vuex的数据理论上只能vuex来修改，不要在vuex mutation之外修改数据，vuex同样遵循单向数据流

mutations：存放操作数据的方法

任何地方如果要修改数据，那么久调用mutations里面的方法

  mutations: {
    addOne (state) {
      state.count++
    },
    addN (state, value) {
      state.count += value
    },
    subOne (state) {
      state.count--
    },
    subN (state, value) {
      state.count -= value
    }
  },

所有mutation函数 第一个形参都是state

组件页面调用mutation函数

this.$store.commit('mutation方法名'，额外参数)

一次提交只能携带一个参数，但是可以传对象或者数组

辅助函数mapMutations 可以映射mutation函数生成函数

methods:{
    ...mapMutations(['subOne','subN'])
}

映射出来的函数都会自动判断是否有参数，并且传入这个参数

state数据的修改只能通过mutations，并且mutations必须是同步的

ations 处理异步

在所有actions函数中

第一个参数都是 ctx 上下文对象

actions:{

    addWaiTime(){
        setTimeout(()=>{
            console.log('测试异步')
            ctx.commit('addN',payload)
        },3000)
        
    }
}

注意action只能提交到mutation，不能直接修改数据的数据

调用方法

methods:{
    ...mapActions(['subOne','subN'])
}

this.$store.dispatch('addWaitTime',payload)

getters和mapGetters

getters存放基于state的一些计算属性

  getters:{
    doubleCount(state){
      return state.count*2
    }
  },

调用方法

原生方法 {{$stroe.getters.doubleCount}}

其他的和state调用差不多

import { mapGetters, mapState } from 'vuex'

export default {
  name: 'app',
  computed: {
    ...mapState(['count']),
    ...mapGetters(['doubleCount'])
  },
  components: {
    AddItem,
    SubItem
  }
}

【博学谷学习记录】超强总结，用心分享