前端【Vuex】【使用介紹】

1、元件下載

　　vue 與vuex的版本對應關係：
　　　　 Vue 2 匹配的 Vuex 3
　　　　 Vue 3 匹配的 Vuex 4
　　Vuex 是一個專為 Vue.js 應用程式開發的狀態管理模式 + 庫。它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
　　官方網站：https://vuex.vuejs.org/zh/

// npm
npm install vuex@next --save

// yarn 
yarn add vuex@next --save

2、專案中定義及配置

　　在src目錄下新增store目錄，建立index.js檔案，內容如下

// 1. 匯入所需的包
import Vue from 'vue'
import Vuex from 'vuex'
// 2. 將Vuex註冊為Vue的外掛
Vue.use(Vuex)
// 3. 建立 store 例項物件
const store = new Vuex.Store({
  // 配置vuex
  strict: true, // 開啟嚴格模式,防止小白在元件中使用的時候直接修改state資料
  // state 用於儲存資料(儲存狀態) (vuex狀態管理)
  state: {
    sex: 23,
    uname: 'badWoman',
    list: [
      { id: 1, name: '吃飯', isDone: true },
      { id: 2, name: '睡覺', isDone: false },
      { id: 3, name: '聽歌', isDone: true }
    ]
  },
  // mutations 是 vuex 中"唯一"可以修改 state 資料的方法, 不支援非同步更新,只能放同步程式碼
  mutations: {
    abc (state, n) {
      state.sex = n
    }
  },
  // actions 裡面放非同步方法
  actions: {
    newSex (store, n) {
      setTimeout(() => {
        store.commit('abc', n) // 只要是修改state中內容, 都透過mutations中的方法進行操作
      }, 3000)
    }
  },
  // getters 是vuex中的計算屬性(和元件中的計算屬性意義一樣,但是不支援set修改)
  // 為了方便獲取state中的資料;外掛作者會給每個計算屬性方法,傳遞一個 state 引數
  getters: {
    ccc (state) {
      return state.sex * state.sex
    },
    all (state) {
      return state.list.every(item => item.isDone === true)
    }
  }
})
// 4. 匯出 store 物件
export default store

　　main.js

import Vue from 'vue'
import App from './App.vue'
// 匯入定義的store目錄下的index.js檔案
// import store from '@/store/index.js' // 如果匯入某個目錄下的index檔案, 則可以省略index
import store from '@/store'
Vue.config.productionTip = false

new Vue({
  store, // 將匯入的store新增到vue例項
  render: h => h(App)
}).$mount('#app')

　　元件AnyOne.vue

<template>
  <div>
    <h2>隨便一個元件-1</h2>
    <!-- 使用vuex中狀態, state中的uname -->
    <p>{{ $store.state.uname }}</p>
    <!-- 使用vuex中狀態, state中的sex -->
    <p>{{ $store.state.sex }}</p>
    <!-- 使用vuex中配置的計算屬性 -->
    <p>{{ $store.getters.ccc }}</p>
    <p>{{ $store.getters.all }}</p>

    <!-- 呼叫mutations中定義的修改state的方法abc, 並傳遞引數5000 -->
    <button @click="$store.commit('abc', 5000)">更新sex</button>
    <br />
    <!-- 呼叫actions中定義的非同步方法newSex，並傳遞引數20 -->
    <button @click="$store.dispatch('newSex', 20)">3s後更新sex</button>
  </div>
</template>

<script>
export default {}
</script>
<style lang="less" scoped></style>

　　元件AnyTwo.vue

<template>
  <div>
    <h2>隨便一個元件-2</h2>
    <!-- 使用計算屬性 -->
    <!-- <P>{{ sex }}</P> -->
    <p>{{ uname }}</p>
    <P>{{ nianLing }}</P>
    <P>{{ uname }}</P>
    <P>{{ ccc }}</P>
    <P>{{ all }}</P>
    <button @click="abc(100)">更新年齡</button>
    <br />
    <button @click="newSex(200)">三秒後更新年齡</button>
  </div>
</template>

<script>
// 匯入vuex中提供的一些方法
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  // data () {
  //   return {
  //     sex: 1777
  //   }
  // },
  computed: {
    // mapState提供一種簡寫方式:  ...mapState() 傳想要獲取的狀態資訊, 拿到當前頁面作為計算屬性使用
    // ...mapState(['sex', 'uname', 'list']),   // 陣列寫法

    // 給從state中獲取的狀態取別名，防止與當前頁面重名，作為當前頁面的計算屬性
    ...mapState({ nianLing: 'sex', uname: 'uname', list: 'list' }),  // 物件寫法, 相當於取別名, 防止與data中的變數重名

    // 將vuex中的getters拿到當前頁面作為當前頁面的計算屬性
    ...mapGetters(['ccc', 'all'])
  },
  methods: {
    // 將vuex中mutations定義的方法拿到當前頁面作為當前頁面的方法
    ...mapMutations(['abc']),
    ...mapActions(['newSex'])
  }
}
</script>
<style lang="less" scoped></style>

　　根元件App.vue

<template>
  <div>
    <AnyOne></AnyOne>
    <hr />
    <AnyTwo></AnyTwo>
  </div>
</template>

<script>
import AnyOne from './components/AnyOne.vue'
import AnyTwo from './components/AnyTwo.vue'
export default {
  data () {
    return {}
  },
  components: {
    AnyOne,
    AnyTwo
  }
}
</script>
<style lang="less" scoped></style>

3、使用

4、簡化呼叫資料

　　import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
　　透過vuex中的一些方法將定義的store中的內容拿到當前頁面