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>