Vue-X 一基础使用

2020-03-04 本文已影响0人 33_6b4e

vuex官网
由于 Vuex 的状态存储是响应式的。

基础使用
创建一个store文件夹，里面创建一个index.js文件，然后以下代码

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        
    },
    // 计算属性
    getters:{
        
    },
    //同步方法
    mutations:{
        
    },
    // 异步方法
    actions:{
        
    }
});

来到main.js里面引入刚才创建的

import store from '/store/index.js'

Vue.prototype.$store = store;

const app = new Vue({
    store,
    ...App
})

以上就引入完成了。

Vuex的state多种用法

state里面存储全局的一些或者公用的一些变量。把数据写在state里面，然后在任何地方调用，就OK了，修改了一处，其他都修改了。

开始撸，撸的要冒火星。

先存储在store文件夹下index.js 里面的state里存储一个数组

export default new Vuex.Store({
    state:{
        list:[
            {
                id:1,
                name:'商品一',
                state:false
            },
            {
                id:2,
                name:'商品二',
                state:false
            },{
                id:3, 
                name:'商品三',
                state:true
            },
            
            {
                id:4,
                name:'商品四',
                state:false
            }
        ]
    },
    // 计算属性
    getters:{
        
    },
    //同步属性
    mutations:{
        
    },
    // 异步方法
    actions:{
        
    }
});

在任意一个.vue文件里面的onLoad方法里输出下面的代码，这是一种取值方式

console.log(JSON.stringify(this.$store.state.list));

这是直接获取数据的方法

this.$store.state.list  就是取得state里面的数据

第二种取值方式，得导入Vuex，引入结构赋值,里面有一个mapState,通过mapState把store里面的数据导入到当前的一个页面

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:mapState({
            
        }),
        methods: {
            
        },
        onLoad() {
            // console.log(JSON.stringify(this.$store.state.list));
        }
    }
</script>

3.1 第一种拿到list

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:mapState({
            list:state=>state.list
        }),
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.list));
        }
    }
</script>

通过list:state=>state.list拿到list里面的数据。通过this.list 就可以拿到了。

3.2 第二种写法字符串写法

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:mapState({
            list:'list'
        }),
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.list));
        }
    }
</script>

通过 list:'list' 这种写法拿到。必须要引号。'list' 就是 store里的state里面的list。上面 list:'list'这个key值也是可以改名称的。

3.3 第三种写法通过return 的方式拿到list数据

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:mapState({
            newlist(state){
                return state.list;
            }
        }),
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.newlist));
        }
    }
</script>

上面代码通过写一个函数来返回list,打印的时候也得用函数名称。

  newlist(state){
       return state.list;
   }
  onLoad() {
      console.log(JSON.stringify(this.newlist));
   }

3.4 使用扩展运算符来写，使用对象，也方便我们自己自定义计算属性。

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapState({
                newlist(state){
                    return state.list;
                }
            })
        },
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.newlist));
        }
    }
</script>

computed:{
    ...mapState({
        newlist(state){
            return state.list;
        }
    })
},

上面使用的了...来运算的。

3.5 使用扩展运算符来写，用数组简单的写法

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapState([
                'list',
            ]),
        },
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.list));
        }
    }
</script>

上面通过

...mapState([
    'list',
]),

必须加引号。

总结一下

什么时候用数组([])？
如果你想直接拿Vuex里面state里面的数据的话，有数组的形式，如果有多个数据，就用逗号隔开

'list','list1'

什么时候用对象({})?
更高级一点用法，就是拿到数据需要过滤、重命名等进一步操作数据的话，用对象。

Vuex的getters多种用法

可以理解为计算属性，但是也跟计算属性不太一样。

Vuex.state里面有很多数据，很多页面要对这个数据进行不同的处理，如果在页面处理，在一些数据页面公用上会写很多的冗余代码，在getters里面处理可以减少很多冗余代码。

getters里面拿到Vuex.Store里面state里的数据，必须使用下面的方法，用this不行。

// 计算属性
getters:{
    activityList:(state)=>{
    // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            
    }
},

activityList是定义的函数。

下面示例是拿state为true的状态的数据。

这份代码是在store文件夹里index.js里的

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        list:[
            {
                id:1,
                name:'商品一',
                state:false
            },
            {
                id:2,
                name:'商品二',
                state:false
            },{
                id:3, 
                name:'商品三',
                state:true
            },
            
            {
                id:4,
                name:'商品四',
                state:false
            }
        ]
    },
    // 计算属性
    getters:{
        activityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return v.status;
            });
        },
            noActivityList:(state)=>{
             // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
          return state.list.filter(v=>{
            return !v.state;
          });
        },
    },
    //同步属性
    mutations:{
        
    },
    // 异步方法
    actions:{
        
    }
});

下面这份代码是在页面(xxx.vue)里面的

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.$store.getters.activityList));
        }
    }
</script>

<style>

</style>

 console.log(JSON.stringify(this.$store.getters.activityList));

通过this.$store.getters.activityList 拿到state为true 的数据。

第二种写法,直接引入mapGetters

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapGetters(['activityList','noActivityList'])
        },
        methods: {
            
        },
        onLoad() {
            // console.log(JSON.stringify(this.$store.getters.activityList));
            console.log(JSON.stringify(this.activityList));
        }
    }
</script>

<style>

</style>

在computed属性里面,像下面这么写就行。打印那就直接掉this. activityList 就行。

...mapGetters(['activityList','noActivityList'])

第三种写法对象类型,然后自定义key名。

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapGetters({
                activity:'activityList',
                noActivity:'noActivityList'
            })
        },
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.activity));
            console.log(JSON.stringify(this.noActivity));
        }
    }
</script>

<style>

</style>

computed:{
     ...mapGetters({
          activity:'activityList',
          noActivity:'noActivityList'
     })
},

这 activity 和 noActivity 都是自定义的类名。

进行getter数据二次过滤

store里面index.js 里面的数据

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        list:[
            {
                id:1,
                name:'商品一',
                state:false,
                num:1
            },
            {
                id:2,
                name:'商品二',
                state:false,
                num:2
            },{
                id:3, 
                name:'商品三',
                state:true,
                num:3
            },
            
            {
                id:4,
                name:'商品四',
                state:false,
                num:4
            },
            {
                id:5,
                name:'商品五',
                state:false,
                num:5
            },
            {
                id:6,
                name:'商品六',
                state:false,
                num:6
            }
        ]
    },
    // 计算属性
    getters:{
        activityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return v.state;
            });
        },
        noActivityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return !v.state;
            });
        },
        getList(state,getters){
            return getters.noActivityList.filter(v=>{
                return v.num > 5;
            });
        }
    },
    //同步属性
    mutations:{
        
    },
    // 异步方法
    actions:{
        
    }
});

上面在getter里面定义了一个getList方法，这个方法2个参数，state是指存储数据的state(也就是getter上面的state)，getter就是指 getters, 可以拿到getters这个对象。

页面(xxx.vue)里面的数据

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapGetters({
                activity:'activityList',
                noActivity:'noActivityList',
                getList:'getList'
            })
        },
        methods: {
            
        },
        onLoad() {
            console.log(JSON.stringify(this.getList));
        }
    }
</script>

<style>

</style>

在具体页面的computed，里面直接

getList:'getList'

可以拿到刚才在store里面index里定义的方法getList。

getters进行传参

下面是 store文件夹里index.js 代码

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        list:[
            {
                id:1,
                name:'商品一',
                state:false,
                num:1
            },
            {
                id:2,
                name:'商品二',
                state:false,
                num:2
            },{
                id:3, 
                name:'商品三',
                state:true,
                num:3
            },
            
            {
                id:4,
                name:'商品四',
                state:false,
                num:4
            },
            {
                id:5,
                name:'商品五',
                state:false,
                num:5
            },
            {
                id:6,
                name:'商品六',
                state:false,
                num:6
            }
        ]
    },
    // 计算属性
    getters:{
        activityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return v.state;
            });
        },
        noActivityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return !v.state;
            });
        },
        getList(state,getters){
            return getters.noActivityList.filter(v=>{
                return v.num > 5;
            });
        },
        getById:(state)=>(id)=>{
            console.log(id)
        }
    },
    //同步属性
    mutations:{
        
    },
    // 异步方法
    actions:{
        
    }
});

在具体页面 xxx.vue里面调用

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        computed:{
            ...mapGetters({
                activity:'activityList',
                noActivity:'noActivityList',
                getList:'getList',
                getById:'getById'
            })
        },
        methods: {
            
        },
        onLoad() {
            this.getById(1);
        }
    }
</script>

<style>

</style>

在onLoad里面的直接掉

this.getById(1);

上面主要是在具体页面里调用getters里面的方法。

Mutation

store.js 里面的代码

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state:{
        number:1,
        list:[
            {
                id:1,
                name:'商品一',
                state:false,
                num:1
            },
            {
                id:2,
                name:'商品二',
                state:false,
                num:2
            },{
                id:3, 
                name:'商品三',
                state:true,
                num:3
            },
            
            {
                id:4,
                name:'商品四',
                state:false,
                num:4
            },
            {
                id:5,
                name:'商品五',
                state:false,
                num:5
            },
            {
                id:6,
                name:'商品六',
                state:false,
                num:6
            }
        ]
    },
    // 计算属性
    getters:{
        activityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return v.state;
            });
        },
        noActivityList:(state)=>{
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v=>{
                return !v.state;
            });
        },
        getList(state,getters){
            return getters.noActivityList.filter(v=>{
                return v.num > 5;
            });
        },
        getById:(state)=>(id)=>{
            console.log(id)
        }
    },
    //同步方法
    mutations:{
        inc(state){
            state.number++;
            console.log(state.number) 
        },
        incValue(state,numer){
            state.number += numer;
            console.log(state.number) 
        },
    },
    // 异步方法
    actions:{
        
    }
});

inc 是一个加的方法，incValue是传一个参数进来，然后 number加上传进来的参数。

具体页面

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters,mapMutations} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            // ...mapMutations(['inc','incValue'])
            ...mapMutations({
                add:'inc',
                sum:'incValue'
            })
            
        },
        onLoad() {
            // this.$store.commit('inc')
            // this.inc();
            // this.incValue(5);
            this.add()
        }
    }
</script>

<style>

</style>

三种方式

直接掉但是得commit

this.$store.commit('inc')

引入mapMutations，然后在methods里面写，再在onload里面掉

methods:{
    ...mapMutations(['inc','incValue'])
}
onLoad() {
    this.inc();
}
这是数组

对象，自定义key名

methods: {
    ...mapMutations({
          add:'inc',
          sum:'incValue'
    })
}
onLoad() {
   this.add()
}

mutations官网地址

Actions

Actions里面放一些异步方法写在这里。它接受的参数为context。

第一种写法，直接调用

    // 异步方法
    actions:{
        //接受的参数为context
        AsyncInc(context){
            // 在页面中 this.$store.commit('inc') 等于下面的这句
            // context.commit('inc')
            
            setInterval(()=>{
                context.commit('inc');
            },
            2000)
            
        }
    }

AsyncInc是一个异步方法，它的目的是隔2S，让mutations里面的inc方法调用一次。然后actions里面的接受参数为context，

 context.commit('inc');
等同于在....vue页面里面直接掉  this.$store.commit('inc')

这时候我们还没有调用，这时候在页面调用

onLoad() {
    this.$store.dispatch('AsyncInc');
}

这时候页面就会打印下2，这就调用成功了。

直接引入 mapActions 数组形式

<template>
    <view>
        
    </view>
</template>

<script>
    import {mapState,mapGetters,mapMutations,mapActions} from "vuex"
    export default {
        data() {
            return {
                
            }
        },
        methods: {
            ...mapActions(['AsyncInc'])
            
        },
        onLoad() {
            this.AsyncInc();
        } 
    }
</script>

<style>

</style>

...mapActions(['AsyncInc'])
this.AsyncInc();

AsyncInc 的参数除了context，还可以使用结构也就是对象.

import Vuex from "vuex";
import Vue from "vue";
// 如果在模块化构建系统中，请确保在开头调用了 Vue.use(Vuex)
Vue.use(Vuex);

export default new Vuex.Store({
    state: {
        number: 1,
        list: [{
                id: 1,
                name: '商品一',
                state: false,
                num: 1
            },
            {
                id: 2,
                name: '商品二',
                state: false,
                num: 2
            }, {
                id: 3,
                name: '商品三',
                state: true,
                num: 3
            },

            {
                id: 4,
                name: '商品四',
                state: false,
                num: 4
            },
            {
                id: 5,
                name: '商品五',
                state: false,
                num: 5
            },
            {
                id: 6,
                name: '商品六',
                state: false,
                num: 6
            }
        ]
    },
    // 计算属性
    getters: {
        activityList: (state) => {
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v => {
                return v.state;
            });
        },
        noActivityList: (state) => {
            // state对应的上面的state，必须通过这种方式拿state，如果用this是拿不到的
            return state.list.filter(v => {
                return !v.state;
            });
        },
        getList(state, getters) {
            return getters.noActivityList.filter(v => {
                return v.num > 5;
            });
        },
        getById: (state) => (id) => {
            console.log(id)
        }
    },
    //同步方法
    mutations: {
        inc(state) {
            state.number++;
            console.log(state.number)
        },
        incValue(state, numer) {
            state.number += numer;
            console.log(state.number)
        },
    },
    // 异步方法
    actions: {
        AsyncInc({
            commit
        }) {
            setInterval(() => {
                    commit('inc');
                },
                2000)
        }
    }
});

在页面调用还是

...mapActions(['AsyncInc'])
this.AsyncInc();

   actions: {
        AsyncInc({
            commit
        }) {
            setInterval(() => {
                    commit('inc');
                },
                2000)
        }
    }

{commit} 这就是对象。

Module

官方文档