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>