标签：lock   保存   ima   如何获取   computed   分类   stat   规则   count   

VueX

Created: Aug 15, 2020 4:42 PM
分类: 技术点
技术: VueX
文件: src/store/action.js, src/store/index.js, src/store/mutation.js

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

VueX我理解就是可以永久保存数据的一种方式

项目目录

index.js代码

import Vue from ‘vue‘
import Vuex from ‘vuex‘
import mutations from ‘./mutation‘
import actions from ‘./action‘

Vue.use(Vuex)
const state = {
  username: ‘‘,
  cartCount: 0
}
export default new Vuex.Store({
  state,
  actions,
  mutations
})

这里一般引入引入文件,可以进行导出

action.js代码

// 商城actions
export default {
  saveUserName (context, username) {
    context.commit(‘saveUserName‘, username)
  },
  saveCartCount (context, count) {
    context.commit(‘saveCartCount‘, count)
  }
}

进行提交,交给mutations处理

mutations.js代码

// 商城VueX-mutations
export default {
  saveUserName (state, username) {
    state.username = username
  },

  saveCartCount (state, count) {
    state.cartCount = count
  }
}

进行更改状态

普通组件如何获取状态

computed: {
    username () {
      return this.$store.state.username
    },
    cartCount () {
      return this.$store.state.cartCount
    }
  },

普通组件批量获取状态

import { mapState } from ‘vuex‘
...mapState([‘username‘])

普通组件进行更改状态

this.$store.dispatch(‘saveUserName‘, ‘‘)
this.$store.dispatch(‘saveCartCount‘, 0)

普通组件批量更改状态(更方便)

import { mapActions } from ‘vuex‘
...mapActions([‘saveUserName‘, ‘saveCartCount‘]),
this.saveUserName(‘‘)
this.saveCartCount(0)

VueX-基本使用

标签：lock   保存   ima   如何获取   computed   分类   stat   规则   count   

原文地址：https://www.cnblogs.com/qisexin/p/13543922.html