vuex学习笔记（一个简单的vuex小案例）

0、新创建一个项目

使用vue-cli创建项目

vue create vue-Count

 将初始的HelloWorld.vue更改成count.vue，代码如下：

<template>
  <div>
    <button @click="increment">点我加1</button>
    <button @click="discrement">点我减1</button>
    <button @click="oddcrement">点我为偶数加1</button>
    <button @click="asyncincrement">点我异步加1</button>
    {{count}}
  </div>
</template>

<script>
//引入mapState mapActions映射属性数据和方法
import { mapState,mapActions } from "vuex"
export default {
  name: 'count',
  data(){
    return{
      // count:0
    }
  },
  computed:{
    // 如果是映射属性数据，无论是state的数据还是getters当中的方法，都映射到computed里面
    ...mapState(['count'])
  },
  methods:{
    // 如果是映射方法，无论是action还是mutations的方法都映射到methods里面
    ...mapActions(['increment','discrement','oddcrement','asyncincrement'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

 功能说明：

通过vuex控制数据的更改

1、安装vuex

在建立好的vue-cli脚手架项目中安装vuex

npm i vuex -S

2、引入并使用vuex

2.1 在src路径下新建store目录--index.js文件，vue-cli会自动拿index.js文件当做入口。

index.js文件内容如下：

// 1 引入Vue
import Vue from 'vue'
// 2 引入vuex
import Vuex from 'vuex'
// 3 注册vuex插件,注意括号里面的Vuex没有双引号
Vue.use(Vuex)

// 4 Vuex的6大核心对象,（这里暂时只使用4个）state mutations actions getters

// 6 定义个个对象的属性
// 6.1 state是一个包含多个属性（不是方法）的对象，其实就是用来存储数据用的
const state ={
    count:0
}
// 6.2 mutations是一个包含了多个方法的对象，用这个对象里面的方法去直接操作数据
// 不可以使用if for 异步
const mutations={
    //这里的形参state就是上面定义的state对象,对应的方法名一般需要大写
    INCREMENT(state){
        state.count++;
    }
    DISCREMENT(state){
        state.count--;
    }
}

const actions = {
    //这里的形参context为上下文对象，本质是store对象
    increment(context){
        context.commit('INCREMENT');
    }
    discrement(context){
        context.commit('DISCREMENT');
    },
    oddcrement({commit,state}){
        if(state.count%2===0){
            commit('INCREMENT');
        }
    },
    asyncincrement({commit,state}){
        setTimeout(()=>{
            commit('INCREMENT');
        },1000);
    }
}

const getters = {

}


// 5 暴露这几个对象，方便vue使用
export default new Vuex.Store({
    state,mutations,actions,getters
})

2.2 在main.js中引入store并配置store

import store from '@/store' //引入store

new Vue({
    el:'#app',
    store, //配置store
    render:h =>h(App)
})