vuex（自用）

vuex（自用）

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
vuex 是 vue 的状态管理工具 管理项目中的公共数据 能够在所有的组件中使用
它适用于中大型项目，数据不能持久化存储

一、五大核心

state-----通过this.$store.state 来获取

用来存放公共数据

getters-----通过this.$store.gettees 来访问

相当于state的计算属性

mutations----通过this.$store.commmit 来提交

唯一有权修改state状态

actions----通过this.$store.dispatch 来触发

actions用于异步操作
actions 提交的是 mutations，而不是直接变更state的状态。

modules

模块化

二、vuex辅助函数

使用时需要从vuex引入到当前页面，mapState,mapGetters需要在computed中使用，mapMutations,mapActions需要在methods中使用

1.mapState

<template>
  <div class="home">
    {{num}}

  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
  computed: {
    ...mapState({num:'num'})//注：这里既可以是一个对象，也可以是一个数组
   //...mapState({'num'})
  },
  methods: {
    
  },
}
</script>

2.mapGetters

<template>
  <div class="home">
    {{comNum}}

  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
  computed: {
    ...mapGetters(['comNum'])
  },
  methods: {
    
  },
}
</script>

3、mapMutations

<template>
  <div class="home">
    {{num}}
    <button @click="add">加</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
  computed: {
    ...mapState({num:'num'})
  },
  methods: {
    ...mapMutations({a:'add'}),
    add(){
      this.a(this.num)
    }
  },
}
</script>

4、mapActions

<template>
  <div class="home">
    {{num}}
    <button @click="add">加</button>
    <button @click="cut">减</button>
  </div>
</template>

<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
export default {
  computed: {
    ...mapState({num:'num'})
  },
  methods: {
    ...mapMutations({a:'add'}),
    ...mapActions({b:'cut'}),
    add(){
      this.a(this.num)
    },
    cut(){
      this.b(this.num)
    }
  },
}
</script>

三、持久化保存数据

可以安装固化插件，也可以在调用mutations方法时存储到本地。

四、命名空间

让代码更好维护，让多种数据分类更加明确。
解决命名冲突
开启：namespace：trur，写在模块中，于state，同级

	modules: {
		goods: {
			namespaced: true,
			state: {
				goodsNum: 0
			},
			getters: {
				comNum(state) {
					return '$' + state.goodsNum
				}
			},
			mutations: {
				addNum(state, data) {
					state.goodsNum += data
				},
			},
			actions: {
				reduceNum({ commit }) {
					commit('addNum', -1)
				}
			},
		}
	},

使用：

读取state：

<p>goods--state--数据{{this.$store.state.goods.goodsNum}}</p>

读取getters：

<p>goods--getters--数据 {{this.$store.getters['goods/comNum']}}</p>
//--------------------------------------------------------------------
computed:{
	   ...mapGetters({lyc: 'comNum'})
  },

调用mutations：

<button type="button" @click="addGoods">加</button>
//--------------------------------------------------------------------
methods:{
	  ...mapMutations(['addNum']),
	  addGoods(){
		  this.$store.commit('goods/addNum',1)
	  }
  }

调用actions：

<button type="button" @click="reduceGoods">减</button>
//--------------------------------------------------------------------
methods:{
	  ...mapActions(['reduceNum']),
	  reduceGoods(){
		  this.$store.dispatch('goods/reduceNum')
	  }
  }

【萌新笔记，不具有参考价值，欢迎大佬指导，补充】