Vue vuex

先看这个理解vuex

代码：

store包下新建index.js

//该文件中用于创建vuex中最为核心的store

import Vue from 'vue'
import vuex from 'vuex'

//Acctions-用于响应组件中的动作Acctions  服务员
const actions = {
    jia(context,value){
        console.log("jia(context,value):",context,value);
        context.commit('JIA',value);
    }
}

//Mutations-用于操作数据（state）  后厨
const mutations = {
    JIA(state,value){
        console.log("JIA(state,value):",state,value);
        state.sum += value
    }
}

//state-用于存储数据
const state = {
    sum:1,
    school:'TsingHua',
    subject:'前端'

}

//准备getters 用于将state中的数据进行加工。因为statez中的sum是最后的环节已经运算完了，但是其他组件还想拿最后的sum在做其他操作，这个时候用computed的话只使用与单个组件，但是多个组件共用进行不同操作就不行了，所以得用getters
//bigsum就是不同组件运算完后的对象
//getters相当于拿state中数据就行操作
const getters = {
    bigsum(state){
        return state.sum * 10
    }
}

//使用插件 vm和vc都会创建store 其实浏览器输出时是以$store显示的，上面import和Vue.use(vuex); 放这是因为必须在new 对象之前先创建vuex完成
//设置成全局的话还是在new 对象之后Vue.use 这肯定是不行的
Vue.use(vuex);

//创建store
const store = new vuex.Store({
    actions, //actions:actions, 简写
    mutations, //mutations:mutations,简写
    state,//state:state  简写
    getters
})

//暴露store
export default store

组件

<template>
    <div>
        <!--模板上可以直接看到vc上所有东西所以不用写this-->
        <h1>当前求和为：{{$store.state.sum}}</h1>
        <h1>借助mapGetters生成计算属性,数组写法(对象写法和mapperState一样) 利用getters 乘10 求积为：{{bigsum}}</h1>
        <!-- mapState对象写法-->
        <h1>借助mapState生成计算属性,对象写法  我在{{xuexiao}},学习{{kemu}}</h1>
         <!-- mapState数组写法-->
         <h1>借助mapState生成计算属性,数组写法 我在{{school}},学习{{subject}}</h1>
        <select v-model.number="n">
           <option value="1">1</option>
           <option value="2">2</option>
           <option value="3">3</option>
        </select>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementOdd">当前求和为奇数在加</button>
        <button @click="incrementWait">等一等在加</button>
    </div>
</template>

<script>
  //其实还有mapMutations(针对于this.$store.commit('JIA1',this.n))，mapActions(针对于this.$store.dispatch('jia',this.n);)
  // ...mapMutations({increment:'JIA',increment1:'JIA1'}) 但是 this.$store.commit('JIA',this.n) 这个this.n  mapMutations 实际上是找不到的，所以最好在template->increment 写成increment(n)，，mapActions和mapMutations有传参，最好在绑定事件时传好。数组写法有点不一样 ...mapMutations({JIA:'JIA',JIA1:'JIA1'}) =>...mapMutations(['JIA','JIA1'}) 这时候template里面不是increment而是写JIA了
  //这四个每个里面都可以写多个 数组和对象写法原则上都一致
  import { mapState,mapGetters} from 'vuex';
  export default{
    // eslint-disable-next-line vue/multi-word-component-names
    name:'CountVuex',
    data(){
        return{
            n:1 //用户选择的数字
        }
    },
    computed:{
    //   基础computed写法
    //   xuexiao(){
    //     return  this.$store.state.school
    //   },
    //   kemu(){
    //     return this.$store.state.subject
    //   }

    //es6语法 分别把里面key:value 分别列出来相当于上面注释的内容。借助mapState生成计算属性，从state中读取
    //借助mapState生成计算属性  对象写法
    ...mapState({xuexiao:'school',kemu:'subject'}),

    //如果上面基础computed写法 xuexiao改为school  kemu改为subject 因为返回的属性和state里面属性名称一样则可以这样写
    //借助mapState生成计算属性  数组写法
    ...mapState(['school','subject']),

    //  bigsum(){
    //     return this.$store.getters.bigsum
    //  },
    //借助mapGetters生成计算属性  bigsum
    ...mapGetters(['bigsum']),
    },
    methods:{
        increment(){
           //这里 dispatch实际对应vuex->index.js里面的Actions（服务员） 这里可以直接省去这一步，咱直接和后厨说也就是直接调用commit('JIA',this.n)
           this.$store.dispatch('jia',this.n);
        },
        decrement(){

        },
        incrementOdd(){

        },
        incrementWait(){
            setTimeout(() => {

            }, 500);
        }
    },
    mounted(){
        console.log("vuex store是否在vc中存在:",this);
        console.log("vuex store加了getters后乘10后变为:",this.$store.getters.bigsum);
        //相当于computed计算属性  x返回是个函数  mapState只能写state里面的不能写getters的
        const x = mapState({xuexiao:'school',kemu:'subject'});
        console.log("vuex mapState:",x);
    }
  }
</script>