vue 状态管理 4.xvuex里面的属性 vuex4.x 创建一个store state state选项，在vuex里

vuex里面的属性

vuex4.x 创建一个store

import {createStore} from 'store'

const store = createStore({
	state() {
  	return {}
  },
  mutations: {}
})

export default store

state

state选项，在vuex里面担当的数据存储，所有的状态都存在于state里面

const state = {
	count: 0
}

组件如何访问 state 里面的数据

this.$store.state.count

store文件里面如何获 state 的状态，在 store 里面，state会作为参数，传递给方法使用

const mutations = {
	increment(state){
  	console.log(state.count)  打印state里面的值
  }
}

mapState

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

import { mapState } from 'vuex

export default {
  // ...
  computed: {
    ...mapState({
      count: state => state.user.count
    })
  }
}

count: state => state.user.count

user 指代的是某一个模块的文件，某一个模块下某一个 state 状态

Getters

有时候我们会根据 state 里面的状态值，去派生一些状态，比如说商品数量、对列表进行过滤并且进行计算，他的特点与组件里面的计算属性很相似，在 Vuex3.x的里面这个属性计算的结果是具有缓存性的，在 Vuex 4.x 里面需要注意的是，计算的结果不具有缓存性了。特别注意一下

const getters = {
	increment (state) {
  	return .....
  }
}

getters 它可以作为参数传递给下一个 getters 并且使用上一个 getters 的返回值

const getters = {
	increment (state) {
  	return state.count
  },
  increments (state,getters) {
  	return .....
  }
}

在组件中获取 getters，store对象向外面暴露了一个 getters的选项

this.$store.getters.increment

mapGetters

辅助函数仅仅是将 store 中的 getters 映射到组件中的计算属性中，进行使用，例如：当我们通过vuex去管理购物车数据， getters通过 state 计算出商品的价格以及商品的数量，返回给组件进行展示使用

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
       doneCount: 'doneTodosCount'
    ])
  }
}

Mutations

mutations选项的作用，就是组件通过提交mutations的方式去触发方法，方法用于去修改 state 里面的数据，mutations 是vuex 里面唯一一个可以直接去修改 state 里面的状态的一个选项
在使用 mutations的时候，他的内部是不可以执行异步代码的，执行异步代码的操作可以通过使用Actions的方式去执行异步操作

const mutations = {
	increment(state) {
    state.count ++
  }
}

组件里面提交mutations的方式

this.$store.commit('increment')

mutations可以接收第二个参数，第二个参数是当提交mutations的时候，可以给当前提交的mutations传递参数

this.$store.commit('increment','要传递的参数')

const mutations = {
	increment(state,v) {
    console.log(v) // 获取组件传递的数据
    state.count ++
  }
}

提交mutations的时候，建议去使用对象的方式进行提交

this.$store.commit({
	type: 'increment',
  count: 0
})

mapMutations

1. 你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 
   辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

import { mapMutations } from 'vuex'

export default {
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ])
  }
}

2. 如果想提交mutations的时候传递参数可以下面这样写,而this的后面就是在vuex里面mutations下定义的方法名字
this.increment(要传递的参数)  他其实映射成了  <==>  his.$store.commit('increment',要传递的参数)

Actions

Actions 他与 mutations的区别在于，前者的内部是可以执行异步操作的，比如说是发起一个网络请求等，并且Actions也是可以去修改 state中的状态，但是他不是直接去修改 state的状态，而是通过提交 mutations的方式，去间接的去修改 state的状态

const state = {
	userArr:{}
}
const mutations = {
	increment(state,res) {
  	state.userArr = res
  }
}
const actions = {
	async inc (context) {
    await axios.get('').then((res) => {
    	context.commit('increment',res.data)
    })
  }
}

在组件中如何触发 Actions

this.$store.dispatch('inc')

参数的传递

this.$store.dispatch('inc',{
 	id: ... 将某一个产品id传递给 actions，发送网络请求
})
  
const actions = {
	async inc (context,id) {
    await axios.get('',id).then((res) => {
    	context.commit('increment',res.data)
    })
  }
}

Modules

模块化，可以将store 按模块进行拆分，每一个状态由一个文件单独进行管理，每一个模块都会有自己的state、mutations、actions、getters

const user = {
	state:() => ({}),
  mutations: {},
  actions: {},
  getters: {}
}
const cart = {
	state:() => ({}),
  mutations: {},
  actions: {},
  getters: {}
}

import { createStore } from 'vuex'

import user from './modules/user'
import cart from './modules/cart'

export default createStore({
  modules: {
    user,
    cart
  }
})

vue 状态管理 4.x