Day 86 VUE——Vuex

Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex的基本使用

第一步：vue create test_vuex

第二步：选择含有 vue-router 与 vuex 的模板或者新建模板，注意一定要加 babel 

第三步：cd test_vuex & npm run serve

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入创建的 store
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,

  // 一定要挂载
  store,
  render: h => h(App)
}).$mount('#app')

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> | 
      {{ $store.state.count }}
    </div>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

import Vue from 'vue'
// 导入模块
import Vuex from 'vuex'

// 使用当前插件
Vue.use(Vuex)

// 创建 store
export default new Vuex.Store({
  state: {  // 当前的状态
    count:0
  },
  mutations: {  // 声明同步的方法
    plus(state){
      // 修改状态
      state.count++
    },
    reduce(state){
      state.count--
    }
  },  
  // 异步
  // actions: {  // 声明异步的方法
  //   // commit mutations 中声明的方法
  //   plus({commit}){
  //     commit('plus')
  //   },
  //   reduce({commit}){
  //     commit('reduce')
  //   }
  // },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="plus">+1</button>
    <h2>{{ count }}</h2>
    <button @click="reduce">-1</button>
  </div>
</template>

<script>
export default {
  computed:{
    count(){
      return this.$store.state.count;
    }
  },
  methods:{
    plus(){
      // dispatch 触发 actions 中声明的方法(异步)
      // this.$store.dispatch('plus')
      // 同步
      this.$store.commit('plus')

    },
    reduce(){
      // 异步
      // this.$store.dispatch('reduce')
      // 同步
      this.$store.commit('reduce')
    }
  }

}
</script>

为什么要使用actions

一旦牵扯到异步 一定要使用 actions 方法。不然界面显示与后台获取的数据会不一致

import Vue from 'vue'
// 导入模块
import Vuex from 'vuex'

// 使用当前插件
Vue.use(Vuex)

// 创建 store
export default new Vuex.Store({
  state: {  // 当前的状态
    count:0
  },
  mutations: {  // 声明同步的方法
    plus(state){
      // 修改状态
      state.count++
    },
    reduce(state){
      state.count--
    },
    plusAsync(state){
      state.count++
    }
  },  
  // 异步
  actions: {  // 声明异步的方法
  //   // commit mutations 中声明的方法
  //   plus({commit}){
  //     commit('plus')
  //   },
  //   reduce({commit}){
  //     commit('reduce')
  //   }
  plusAsync({commit}){
    commit('plusAsync')
  }
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="plus">+1</button>
    <h2>{{ count }}</h2>
    <button @click="reduce">-1</button>
    <button @click="plusAsync">+1 异步</button>
  </div>
</template>

<script>
export default {
  computed:{
    count(){
      return this.$store.state.count;
    }
  },
  methods:{
    plus(){
      // dispatch 触发 actions 中声明的方法(异步)
      // this.$store.dispatch('plus')
      // 同步
      this.$store.commit('plus')

    },
    reduce(){
      // 异步
      // this.$store.dispatch('reduce')
      // 同步
      this.$store.commit('reduce')
    },
    plusAsync(){
      this.$store.commit('plusAsync')
    }
  }

}
</script>

Vuex系列的辅助函数的运用

import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'

 

import Vue from 'vue'
// 导入模块
import Vuex from 'vuex'

// 使用当前插件
Vue.use(Vuex)

// 创建 store
export default new Vuex.Store({
  state: {  // 当前的状态
    count:0,
    username:'亦双弓'
  },
  getters:{
    odd_even(state){
      return state.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  mutations: {  // 声明同步的方法
    plus(state){
      // 修改状态
      state.count++
    },
    reduce(state){
      state.count--
    },
    plusAsync(state){
      state.count++
    }
  },  
  // 异步
  actions: {  // 声明异步的方法
  //   // commit mutations 中声明的方法
  //   plus({commit}){
  //     commit('plus')
  //   },
  //   reduce({commit}){
  //     commit('reduce')
  //   }
  plusAsync({commit}){
    commit('plusAsync')
  }
  },
  modules: {
  }
})

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="plus">+1</button>
    <h2>{{ myCount }} --- {{ odd_even }} --- {{ user }}</h2>
    <button @click="reduce">-1</button>
    <button @click="plusAsync">+1 异步</button>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
  computed:{
    // count(){
    //   return this.$store.state.count;
    // }
    // odd_even(){
    //   return this.$store.getters.odd_even;
    // },
    // mapState 的使用
    // ...mapState(['count'])
    ...mapState({
      myCount:'count',
      user:'username'
    }),
    // mapGetters 的使用
    ...mapGetters(['odd_even'])
  },
  methods:{
    // plus(){
    //   // dispatch 触发 actions 中声明的方法(异步)
    //   // this.$store.dispatch('plus')
    //   // 同步
    //   this.$store.dispatch('plus')

    // },

    // 简写 mapActions 的使用
    ...mapActions(['plus']),


    // reduce(){
    //   // 异步
    //   // this.$store.dispatch('reduce')
    //   // 同步
    //   this.$store.commit('reduce')
    // },
    // plusAsync(){
    //   this.$store.commit('plusAsync')
    // }

    // 简写 mapMutations 的使用
    ...mapMutations(['reduce','plusAsync'])
  }

}
</script>

如何在组件内部提交数据给vuex

<template>
  <div class="about">
    <h1>This is an about page</h1>
    <button @click="plus">+1</button>
    <h2>{{ myCount }} --- {{ odd_even }} --- {{ user }}</h2>
    <button @click="reduce">-1</button>
    <button @click="plusAsync">+1 异步</button>
  </div>
</template>

<script>
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
export default {
  computed:{
    ...mapState({
      myCount:'count',
      user:'username'
    }),
    ...mapGetters(['odd_even'])
  },
  methods:{
    ...mapActions(['plus']),

    // 在组件内部提交数据  载荷形式分发
    plusAsync(){
      this.$store.dispatch('plusAsync',{
        amount:10
      })
    },

    // 简写 mapMutations 的使用
    // ...mapMutations(['reduce','plusAsync'])
    ...mapMutations(['reduce'])
  }
}
</script>

import Vue from 'vue'
// 导入模块
import Vuex from 'vuex'

// 使用当前插件
Vue.use(Vuex)

// 创建 store
export default new Vuex.Store({
  state: {  // 当前的状态
    count: 0,
    username: '亦双弓'
  },
  getters: {
    odd_even(state) {
      return state.count % 2 === 0 ? '偶数' : '奇数'
    }
  },
  mutations: {  // 声明同步的方法
    plus(state) {
      // 修改状态
      state.count++
    },
    reduce(state) {
      state.count--
    },
    // 接收值
    plusAsync(state, amount) {
      state.count += amount
    }
  },
  // 异步
  actions: {  // 声明异步的方法
    // 传入值
    plusAsync({ commit }, { amount }) {
      console.log(amount);
      setTimeout(() => {
        commit('plusAsync', amount)
      }, 1000);
    }
  },
  modules: {
  }
})