vue-15-vuex-store的用法

vue-16-vuex

1, 介紹

對 vue 進行狀態管理的, 集中存儲所有組件的所有狀態, 解決多個組件共享數據的問題.
即, 所有組件可以拿到同樣的狀態, 組件間共享數據

2, 在之前進行數據交互, 需要有子父關系

parent:

<template>
  <div>
    parent: {{ info }}
    <Child :title="msg" @sendMsg="handlerMsg"/>
  </div>
</template>

<script>
  import Child from "./Child";
  export default {
    name: "Parent",
    components: {Child},
    data() {
      return {
        msg: "hello son",
        info: ""
      }
    },
    methods: {
      handlerMsg(info) {
        this.info = info
      }
    }
  }
</script>

<style scoped>

</style>

child:

<template>
  <div>
    Child:
    receive from parent: {{ title }}

    <div>
      <button @click="sendMsg">emit </button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Child",
    data() {
      return {

      }
    },
    props: {
      title: {
        type: String,
        default: ""
      }
    },
    methods: {
      sendMsg() {
        this.$emit("sendMsg", "the message from son ")
      }
    }
  }
</script>

<style scoped>
</style>

3. vue的狀態管理

view -> (dispath) Action -> (Commit)Mutations -> (Mutate) State -> View
注意: Actions不會必需品, 如果有異步操作才可能用到 Action, 否則不可以使用

4. 安裝VueX

cnpm install --save vuex

5. 使用

// vuex
import Vuex from 'vuex'
Vue.use(Vuex)

6. store 是vuex 的核心

在src 下創建 store 文件夾, 並新建 index.js
寫入store

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

Vue.use(Vuex)

// 創建vuex的store
const store = new Vuex.Store({
  state: {
    count: 5
  },
  // 更改store的狀態
  mutations: {
    increment (state) {
      state.count++
    },
    decrement (state) {
      state.count--
    }
  },
  // 有異步的時候， 需要action
  actions: {
    increment(context) {
      context.commit('increment')
    },
    decrement (context) {
      setTimeout(function () {
        context.commit("decrement")
      }, 10)
    }
  },
  // 通過getter 進行數據獲取
  getters: {
    getState(state) {
      return state.count > 0 ? state.count : 0;
    }
  }
})

export default store

在 main.js 中導入, 並注入到 App中

import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // 注入 store
  store,
  router,
  components: { App },
  template: '<App/>',
})

7. 在vue 中進行引用

<template>
  <div>
    <div>
      test...
      {{ msg }}<br/>
    </div>

    <div>
      獲取值 --
      {{ getCount }} <br/>
      <button @click="add">inc</button>
      <button @click="des">decri</button>
    </div>

  </div>
</template>

<script>
  export default {
    name: "outter",
    data() {
      return {
        msg: "hello"
      }

    },
    computed: {
      // 避免編程負數， 需要通過方法進行獲取
      getCount() {
        // return this.$store.state.count
        return this.$store.getters.getState;
      }
    },
    methods: {
      add() {
        this.$store.commit("increment")
      },
      des() {
        // 使用 action中的異步方法
        this.$store.dispatch("decrement")
      },
    }
  }
</script>

<style scoped>

</style>