vue基础---14vuex

 

1.什么是vuex?

　　Vuex是一个专门为Vue.js应用程序开发的状态管理模式。通俗的讲就是把所需要的多个组件共享的变量全部存储在一个对象里面，方便在不同组件获取或者修改值。

 　　安装命令：npm install vuex@3.6.0 --save

　　卸载命令：npm uninstall vuex --save,可以尝试把node_modules文件删除

2.vuex的核心概念：

　　State：State是唯一的数据源，我们需要把任何一个需要抽取出来的变量，都要放到我们的State里面去来进行管理，相当于data对象。

　　Getters：相当于计算属性。

　　Mutations：触发同步事件,用于改变state的数据状态和值。

　　Actions：异步请求，比如请求服务器后台数据，必须是异步的。

 　   Modules：面对复杂的应用程序，当管理的状态比较多时；我们需要将vuex的store对象分割成模块(modules)。

2.vuex取值方法：

<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)
        }
    }
})