vuex 使用 mapState, mapMutations,mapGetters,mapActions方法

cnpm i vuex --save-dev

2.在scr文件新建store目录，目录中添加store.js并在这里插入代码片引入vuex

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

store.js内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var state={  //state用来存放数据的对象
  count:0
}
var mutations={  //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象);
  change(){
    state.count+=1
  },
  decrement(){
    state.count-=1
  }
}
var getters={  //实时监听state值的变化(最新状态)
  myCount(state) {
      return `current count is ${state.count}`
    }
}
var actions={   //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性
    myIncrease(context) {
      console.log(context)
      context.commit('change')
    },
    myDecrease(context) {
      context.commit('decrement')
    }
}
const store = new Vuex.Store({ //创建一个store仓库
  state,
  mutations,
  getters,
  actions
})
export default store  //暴露

3. main.js全局引入store

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js' //引入

Vue.config.productionTip = false

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

4.组件中应用

<template>
  <div class="hello">
    <h1>{{ count }}</h1>
    <h1>{{viewsCount}}</h1>
    <p>sex:{{sex}}</p>
    <h2>{{this.$store.state.count}}</h2>
    <p>{{myCount}}</p>
    <button @click="change()">按钮加</button>
    <button @click="reduce()">按钮减</button>
  </div>
</template>

<script>
    import { mapState, mapMutations,mapGetters,mapActions} from "vuex";  //mapState, mapMutations,mapGetters,mapActions辅助函数

export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  // store,
  created() {
    // this.$store.dispatch('myIncrease')
    this.todo()
  },
  computed: {
    // count(){
    //   return this.$store.state.count
    // },

    ...mapState({  //对象展开运算符
     viewsCount: 'count',//mapState写法一
     sex:(state)=>state.count//mapState写法二
   }),
   //mapState写法三
    ...mapState(["count"]),
    ...mapGetters(["myCount"])
  },
  methods:{
    // ...mapMutations(["change", "decrement"]),
    // ...mapActions(["myIncrease", "myDecrease"]),
    // ...mapActions(["myIncrease"]),
    ...mapMutations({
      change:'change',
      reduce:'decrement'
    }),
    ...mapActions({
      todo:'myIncrease'
    }),
    // change(){
    //   this.$store.commit('change')
    // },
//     reduce(){
//       this.decrement()
//
//     }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

总结一下：
一、组件中获取state中count值方法
1.template中{{this.$store.state.count}}
2.computed中return

count(){
     return this.$store.state.count
  }
template中{{count}}

3.computed使用mapState

 ...mapState({  //对象展开运算符
     viewsCount: 'count',//mapState写法一
     sex:(state)=>state.count//mapState写法二
   }),

...mapState(["count"]),//mapState写法三

二、组件中调用mutations方法
1.methods中change方法

change(){
      this.$store.commit('change')
    },

2.methods 中使用mapMutations

写法一
...mapMutations({
      change:'change',   //格式   组件方法 ：store中Mutations的方法
      
    }),
写法二   
...mapMutations(["change"),  //change  是store中Mutations的方法

三、组件中调用getters
1.template中{{this.$store.getters.myCount}}
2.computed中return

myCount(){
     return this.$store.getters.myCount
  }

3.computed使用mapGetters

 ...mapGetters({  //对象展开运算符
     myCount: 'myCount',//mapState写法一

   }),

...mapGetters(["myCount"]),//mapState写法二

四、组件中调用actions

1. 在created中 this.$store.dispatch(‘myIncrease’)

created() {
     this.$store.dispatch('myIncrease')
    
  },```
2. 在methods中用mapActions   created调用

```javascript
...mapActions({
      todo:'myIncrease'
    }),
created() {   
    this.todo()
  },

可以直接复制执行理解！！！