记录vuex的初步使用

 目录结构

 main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex' // step:1
Vue.config.productionTip = false

Vue.use(Vuex) // step:2
/* eslint-disable no-new */

// step:3 创建store对象
const store = new Vuex.Store({
  // 全局状态
  state:{
    count:0,
    msg: 'zzz'
  },
  getters:{

  },
  mutations:{
    increment(state){
      state.count += 1
    },
    decrement(state){
      state.count -= 1
    }
  },
  actions:{ // 通常处理逻辑相关的事情
    async myincrement(context){
      context.commit('increment')

      const products = [1,2,3,4,5] // await axios.get(......)

      return products
    },
    mydecrement(context){
      context.commit('decrement')
    }
  }
})

new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  store // step4 vue实例中引入。store挂载到vue实例中
})

App.vue

<template>
  <div id="app">
    <!--<img src="./assets/logo.png">-->
    在App.vue中显示store中的值:<br></br>{{count + '--msg:' + msg}}
    <StoreDemo></StoreDemo>
  </div>
</template>

<script>
import { mapState } from 'vuex' //引入辅助函数 mapState
import HelloWorld from './components/HelloWorld'
import StoreDemo from './components/StoreDemo'


export default {
  name: 'App',
  components: {
    HelloWorld,StoreDemo
  },
  computed:{
    ...mapState(['count','msg'])
  }
}
</script>

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

StoreDemo.vue

<template>
    <div>
      <div style="display: none;">
        将改变全局状态的动作放在了StoreDemo.vue这个组件中，放在这个组件中也有这样一个目的：
      在不同的组件中操作全局状态。
      </div><br>
      <button @click="increase">增加</button>
      <button @click="decrease">减少</button><br>
      <button @click="increment">增加2</button>
      <button @click="decrement">减少2</button><br>
      <button @click="add">增加3</button>
      <button @click="del">减少3</button><br>
      测试store--{{count + '--msg:' + msg}}
    </div>
</template>

<script>
import { mapState,mapMutations,mapActions } from 'vuex'
export default {
  name: "StoreDemo",
  data(){
    return {
      num:10,
    }
  },
  //方式一 普通获取store中的状态
  // computed:{
  //   count(){
  //     return this.$store.state.count
  //   },
  //   msg(){
  //     return this.$store.state.msg
  //   }
  // },
  // 方式二
  // computed:mapState({
  //   //1,箭头函数
  //   count:state=>state.count,
  //   //2,c传字符串参数‘count’等同于 state=>state.count
  //   countAlisa:'count',
  //   countlocalState(state){
  //     return state.count + this.num
  //   }
  // }),
  // 方式三 对象的展开运算符
  // computed:{
  //   ...mapState({
  //     countAlisa:'count',
  //     countlocalState(state){
  //       return state.count + this.num
  //     },
  //     count:state=>state.count
  //   })
  // },
  computed:{
      ...mapState(['count','msg'])
  },
  methods:{
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`
      'decrement']),
    ...mapMutations({
      add: 'increment', // 将 `this.add()` 映射为 `this.$store.commit('increment')`
      del: 'decrement'
    }),
    ...mapActions(['myincrement','mydecrement']),
    async increase() {
      // this.$store.commit('increment') // 可行
      // this.increment() // 可行
      const products = await this.myincrement()
      console.log(products)
    },
    decrease(){
      //this.$store.commit('decrement') // 可行
      //this.decrement() // 可行
      this.mydecrement()
    }
  }
}
</script>

<style scoped>

</style>