<template>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
  <div>
  123
  </div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
  export default{
    name:"app",
    data(){
      return{
      }
    },
    created(){
      // 获取state方法一
      // console.log(this.$store.state.list);
      // 对应写法一:
      // console.log(this.list);
      // 对应写法二:
      // console.log(this.list);
      // 对应写法三:
      // console.log(this.newList);
      // 对应获取state方法三
      console.log(this.list);




      // 获取getters方法一
      // console.log(this.$store.getters.screen);
      // 对应获取getters方法二
      // console.log(this.screen);
      // console.log(this.screens);
      // 对应获取getters方法三
      // console.log(this.screen);
      // console.log(this.screens);
      // getters传参;需要先获取getters中的方法，再进行传参
      // console.log(this.getById(123))





      // 执行mutations方法一
      // this.$store.commit('add')
      // 对应mutations方法二
      // this.add()
      // 对应mutations方法三
      // this.add1()
      // 对应mutations传参
      this.add3(10)





      // 执行actions方法一
      // this.$store.dispatch('AsyncInc')
      // 对应actions方法二
      // this.AsyncInc()
      // 对应actions传参
      this.AsyncInc(50);
    },
    computed:{
      //获取state方法二
      /*...mapState({
        // 写法一:
        // list:state=>state.list,
        // 写法二:
        // list:'list',
        // 写法三:
        // newList(state){
        //   return state.list
        // }
      })*/
      //获取state方法三
      ...mapState([
        'list'
      ]),







      // 获取getters方法二
      // ...mapGetters(['screen','screens'])
      // 获取getters方法三
      // ...mapGetters({
      //   screen:'screen',
      //   screens:'screens'
      // })
      // 对应getters传参
      ...mapGetters(['getById'])








    },
    methods:{
      // 获取mutations中方法二
      // ...mapMutations(['add'])
      // 获取mutations中方法三
      // ...mapMutations({
      //   add1:'add'
      // })
      // 对应mutations传参
      ...mapMutations(['add3']),





      // 获取actions中方法二
      // ...mapActions(['AsyncInc'])
      // }
      // actions传参
      ...mapActions(['AsyncInc'])
      }
    }
</script>
      
<style>
      
</style>

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex)

export default new Vuex.Store({
    state:{//相当于data
        number:1,
	list:[
		{
		　　id:1,
		　　name:"商品一",
		　　status:5,
		　　boolean:false
		},
		{
		　　id:2,
		　　name:"商品二",
		　　status:6,
		　　boolean:true
		},
		{
		　　id:3,
		　　name:"商品三",
		　　status:7,
		　　boolean:false
		}
	]
    },
    getters:{//相当于计算属性
	screen(state){//过滤status值大于5的数据
		return state.list.filter(v=>{
			return v.status>5
		})
	},
	screens(state,getters){//传参getters，可以引用本身
		return getters.screen.filter(v=>{
			return v.boolean
		})
        },
        getById:(state)=>(id)=>{//传参
            console.log(state);
            console.log(id);
        }
    },
    mutations:{//唯一能改变state状态的
        add(state){
            state.number+=1
            console.log("number:"+state.number);
        },
        add3(state,n){//传参
            state.number+=n
            console.log("number:"+state.number);
		},
    },
    actions:{//异步方法
        AsyncInc(context,n){
            // context相当于this.$store.commit
            console.log(n);
            setInterval(()=>{
                context.commit('add',3)
                console.log("actions:"+context.state.number);
            },2000)
        }
    }
})