vuex中的store(state, mapState等)用法

2023-10-28 14:57:04

1.介绍vuex里面的四大金刚:State，Mutations，Actions，Getters

(针对localStorage和这个用来存储的区别，感兴趣的可以搜一下）

State（state）
1. Vuex使用单一状态树，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源(SSOT)”而存在。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。简单粗暴理解： 我们要把我们需要做状态管理的量放到这里来，然后在后面的操作它。
```
//声明一个state
const state = {
  blogTitle: 'bolg标题',
  views: 10,
  blogNumber: 100,
 	total: 0,
  todos: [
    {id: 1, done: true, text: '待做事项1'},
    {id: 2, done: false, text: '待做事项2'},
    {id: 3, done: true, text: '待做事项3'},
  ]
}
```
Mutation
1. 我们有了state状态树，我们要改变它的状态（值），就必须用vue指定唯一方法 mutation，官网说：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。简单粗暴理解：任何不以mutation的方式改变state的值，都是耍流氓（违法）
```
//创建一个mutation
const mutation = {
  addViews (state) {
    state.views++
  },
  blogAdd (state) {
    state.blogNumber++
  },
  clickTotal (state) {
    state.total++
  }
}
```
Action
1. action的作用跟mutation的作用是一致的，它提交mutation，从而改变state，是改变state的一个增强版，官网说：Action 类似于 mutation，不同在于：1. Action 提交的是 mutation，而不是直接变更状态。2.Action 可以包含任意异步操作。
```
const actions = {
  addViews ({commit}) {
    commit('addViews')
  },
  clickTotal ({commit}) {
    commit('clickTotal')
  },
  blogAdd ({commit}) {
    commit('blogAdd')
  }
}
```
Getter
1. 官网说：有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。减少我们对这些状态数据的操作
  
  简单粗暴理解：状态树上的数据比较复杂了，我们使用的时候要简化操作，上面的state.todos 是一个对象，在组件中挑不同的数据时，需要对其做下处理，这样每次需要一次就处理一次，我们简化操作，将其在getter中处理好，然后export 一个方法；
```
const getters = {
 	getToDo (state) {
 	return state.todos.filter(item => item.done === true)
 	// filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组
 }
}
```

2.使用

src下新建文件 store.js
main.js中导入文件
组件中使用
具体看末尾的代码地址，git clone下来可立即

3.mapState, mapGetters, mapActions, mapMutations

对应四大金刚的一个辅助函数

mapState

当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键盘。对应官网:https://vuex.vuejs.org/zh-cn/state.html

#实例代码
#html
<p>
  mapState方式{{viewsCount}};<br/>
  直接使用views{{this.$store.state.views}}
</p>

#js
...mapState({
	viewsCount: 'views'
})

我们需要使用一个工具函数将多个对象合并为一个，这个 ... 方法就合适了，将多个函数方法合并成一个对象，并且将vuex中的this.$store.views 映射到this.viewsCount (this -> vue)上面来，这样在多个状态时可以避免重复使用，而且当映射的值和state 的状态值是相等的时候，可以是直接使用
...mapState({
 'views'
 }),

mapMutations

mapMutations其实跟mapState的作用是类似的,将组件中的methods映射为store.commit调用上面的代码:

<span>{{this.$store.state.total}}</span>
<p><button @click="totalAlise">点击增加total</button>
  
...mapMutations({
  totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法
})

mapActions

action的一个辅助函数，将组件的methods映射为store.dispatch调用

<h4>blogNumber数字</h4>
<span>state中blogNumber:{{this.$store.sate.blogNumber}}</span>

created(){
 // this.$store.dispatch('blogAdd')
 // 直接通过store的方法 触发action, 改变 views 的值
 this.blogAdd() // 通过mapActions 触发mutation 从而commit ，改变state的值
}

...mapActions({
  blogAdd: 'blogAdd' // blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，blogAdd 才是actions里面函数方法名称 
})

mapGetter

仅仅是将store中的getter映射到局部计算属性

<h5>todos里面的信息</h5>
	<ul>
    <li v-for="item in todosAlise" :key="item.id">
    //<li v-for="item in this.$store.state.todos" :key="item.id"> 这里就是直接读取store的值，没有做过滤操作，如果需要过滤。
      <span>{{item.text}}</span><br/>
      <span>{{item.done}}</span>
    </li>
	</ul>
</h5>

...mapGetters({
	todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise
})

//这个 getToDo 是在getters 定义的一个方法，它将todos 里的对象属性done为true的之过滤出来
getToDo(state) {
  return state.todos.filter(item => item.done === true)
  //filter迭代过滤器 将每个item的值 item.done == true 挑出来，返回的是一个数组
}

参考：

码农公寓