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

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

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

  1. 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'},
  ]
}

  2. 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++
  }
}

  3. 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')
  }
}

  4. 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.使用

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

3.mapState, mapGetters, mapActions, mapMutations

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

  1. 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'
 }),

  2. mapMutations

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

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

  3. 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里面函数方法名称 
})

  4. 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 挑出来，返回的是一个数组
}

参考：

  1. https://www.php.cn/js-tutorial-394694.html
  2. https://vuex.vuejs.org/zh/guide/state.html#在-vue-组件中获得-vuex-状态
  3. 代码地址：https://gitee.com/ashscc/vue-ptn
posted @ 2021-12-30 15:49  orangeScc  阅读(1155)  评论(0)  编辑  收藏  举报