vuex 第一节

vuex 是什么？

Vuex 是一个专为 Vue.js 应用程序开发的 状态管理模式，类似 redux
vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。
当项目数据量达到一定程度的时候去使用。 vueX存储数据是存储在内存当中的
这种状态管理模式包含:

• State : 状态数据源
• View : 使用状态数据源的视图
• Actions : 修改更新数据源的操作

这种模式遵循的是 单向数据流 模式

4、vuex 的工作流

• State : 存储应用状态数据（React 中的 State）
• Vue Component : 消费 State
• Actions : 提交修改 State 的动作（包括异步行为）（React 中的 action）
• Mutations : 唯一更改 State 的位置（React 中的 Reducer）

安装 vuex

npm i vuex
// or
yarn add vuex

6、引入 vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

Store

**Store ** 就是仓库，存储数据，我们前面提到的 state 就存储在 store 中，同时提交动作、修改状态的方法也都由 store 提供和管理
Store中的数据也是会被追踪的当数据发生改变会自动渲染页面

创建一个 Store

必须在 Vue.use(Vuex) 之后创建 store

Vue.use(Vuex)
let store = new Vuex.Store({
    state: {},
    getters: {},
    mutations: {},
    actions: {}
})

存储应用状态数据的对象，state 的值可以是一个对象，也可以是一个返回对象的函数，类似 vue 中组件的 data ，使用函数的方式返回对象可以避免对象引用导致的副作用问题

在组件中使用 store

export default new Vuex.Store({//创建仓库并使用导出 可以有多个
  state: { //存储数据  vueX中存储的数据也是会被追踪的当数据发生改变会自动渲染页面    
    tiele:'华山论剑',
    content:"good",
  },
  mutations: {
  },
  // 异步的处理在actions里面处理，然后通过commmit提交给
  actions: {
  },
  modules: {
  },
})

方法1、在组件中使用数据

<template>
  <div class="about">
    <h1>
      {{t}}
    </h1>
    <div>
      {{c}}
    </div>
  </div>
</template>

    computed: { 
    t(){
      return this.$store.state.content
    },
    c(){
      return this.$store.state.tiele
    }

方法2 .数组的方式, 如果数据没有需要处理的可这么写 引入mapState
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键，通常我们把 store 的 state 通过 mapState 函数映射到组件的 computed 上

<template>
  <div class="about">
    <h1>
      {{tiele}}
    </h1>
    <div>
      {{content}}
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
 
  name :'About',
  data() {
    return {
      val:1
    }
  },
  computed: mapState(['tiele','content']),
}
</script>

3.对象的方式

<script>
import {mapState} from 'vuex'
export default {
  
  name :'About',
  data() {
    return {
      val:1
    }
  },
  computed: {
    result(){ 
      return this.val*10
    },
    ...mapState({ //扩展运算
      tiele:"tiele",
      con:({content})=>{return content.toUpperCase()} //处理的是从state中拿出来的sh
    })
  },

}
</script>

getters

有时候我们需要从 store 中的 state 中派生(计算)出一些状态，类似组件的 data 与 computed，store 也提供了一个 getters 对象来处理派生数据
多个组价有共同的需求时我们可以在store/index.js文件中使拥getters方法，在出库之前处理，然后派出使用

getters 函数

与组件属性一样，我们是通过定义一个函数的形式来返回派生数据的，getters 函数接受两个参数

• 第一个参数：state 对象
• 第二个参数：getters 对象

案例

点击按钮男/女进行筛选
总体思路：showUsers 通过返回的内容判断自身是什么类型 我们要传数据的话需要返回一个函数
函数体里方法按需 Home页面里showUsers就是一个函数了，我们就为其传参

import Vue from 'vue'
import Vuex from 'vuex'
// import {mapState,mapMutations} from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({//创建仓库并使用导出 可以有多个
  state: { //存储数据  vueX中存储的数据也是会被追踪的当数据发生改变会自动渲染页面
    userGender:'', //这里存储筛选条件，在页面中，改变这里的数据 从而影响发送至页面的数据
    users :[
      {id: 1, username: '小王', gender: '男',checked:false},
      {id: 2, username: '小李', gender: '男',checked:false},
      {id: 3, username: '小张', gender: '男',checked:false},
      {id: 4, username: '小黄', gender: '男',checked:false},
      {id: 5, username: '小花', gender: '女',checked:false},
      {id: 6, username: '小芳', gender: '女',checked:false}
      ]
  },
  getters:{
    // showUsers({users,userGender}){//参数对象state中自动传过来的  1原数据 2怎么筛选 
    //   return ''===userGender ? users : users.filter(user=>user.gender==userGender)
    //   //      如果userGender为空 返所有   否则过滤     user数据的性别 等于userGender的值      
    // },//上面这种方法页面无法传递数据，只能通过代码更改达到过滤
    showUsers({users,userGender}){
      return (userGender ='')=>{
        return ''===userGender ? users : users.filter(user=>user.gender==userGender) 
      }
    },
    // showSort:()=>{ return 123}  等同于 showSort :123
    // showSort:()=>{ return ()->{} } 返回一个函数
  },
  /*
  1：   users ：   数组中的数据源渲染到页面
  2.：  getters:   在数据源出门之后，进行派生，派生依赖于一个参数
  3.： 页面控制  派生依赖的参数*/ 
})

Home组件

<template>
  <div class="home">
    <ul>
      <button @click="sex='男'" :class="{'active':sex=='男'}">男</button>
      <button @click="sex='女'" :class="{'active':sex=='女'}">女</button>
      <li v-for="(user,index) in users" :key="index">
        {{user.username}}
      </li>  
    </ul>   
  </div>
</template>

<script>
export default {
  name: 'Home',
  data() {
    return {
      sex:'',//默认为空
    }
  },
  components: {
    HelloWorld
  },   
  computed: { 
    users(){
      // return this.$store.state.users; //显示原始数据
      return this.$store.getters.showUsers(this.sex); //函数(传递的参数)
    },
  },
}
</script>
<style scoped>
  ul{
    list-style: none;
  }
  .active{
    background:blueviolet;
    color:white;
  }
</style>