vue中逗号的使用方法_Vuex 的使用方法

Vuex 的使用

安装：npm i vuex --save

然后创建一个store

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: { },

mutations: { },

getters: { },

actions: { }

})

复制代码

一定要引入 vuex 并且要在开头调用 Vue.use(Vuex)

下面四个方法均是在App组件中想要获得数据或方法

mapState

将状态从根组件“注入”到每一个子组件中

在 store 中添加一个数据

state: {

counter: 1,

}

复制代码

在App组件中使用这个数据

可以使用 this.$store.state.counter 获得这个数据，但是我们一般不用此方法

我们可以使用mapState

在App中导入这个方法

import {mapState} from "vuex"

然后在计算属性中(computed)使用

computed:{

...mapState(["counter"]),

}

复制代码

这样就获得了这个数据，可以在页面中使用 插值表达式：{{ counter }},直接使用这个数据

如果想要获得多个数据(数组也可以)

...mapState(["counter","arr","list"]),

只需中间加个逗号，这样写就ok了

mapGetters

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数,这时就要用到 mapGetters 方法了

例如我在 store 中定义一个数组

state: {

list: [

{ name: "ming", score: 40 },

{ name: "gang", score: 50 },

{ name: "lan", score: 60 },

{ name: "mei", score: 70 },

{ name: "tian", score: 80 },

{ name: "bai", score: 90 },

]

}

复制代码

想要过滤出分数小于60分的，这时就需要在 store 中的 getters 中定义一个方法：

getters: {

faileNum(state){

return state.list.filter(item=>item.score < 60).length;

}

}

复制代码

然后在App组件的计算属性中接收此方法

一定不要忘了引入

import {mapGetters} from "vuex"

computed:{

...mapGetters(["faileNum"]),

}

复制代码

然后直接在组件中使用插值表达式输出就好了

不及格的学生人数是：{{faileNum}}

mapMutation

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation

例如：我们在 store 中定义一个数据

state: {

stus: ["ming", "hong"],

}

复制代码

我们想要在stus数组中加入一个数据

除了平常用的 this.$store.commit(xxx) ,我们最经常使用的还是 mapMutation 方法

此时我们就需要在store中的 mutations 下定义一个方法

mutations: {

add(state, n) {

state.stus.push(n)

},

}

复制代码

然后直接在 App组件中导入这个方法

import {mapMutations} from "vuex"

然后在methods下使用这个方法，如下

methods:{

...mapMutations(["add"]),

}

复制代码

最后直接在组件中 绑定click方法使用 就好了，还可以传参

增加

复制代码

注：Mutation 必须是同步函数

mapActions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态

Action 可以包含任意异步操作。

例如，我们写一个异步操作，首先在 store 中定义数据

state: {

counter: 1,

}

复制代码

然后在 mutations 中定义一个方法

mutations: {

//同步点击

addNum(state) {

state.counter++

}

},

复制代码

最后在 actions 中定义一个异步操作

actions: {

// 如果把异步放在mutaions中，使用程序在调试面板中很难调试，可以把异步放到actions

// actions和mutations中不同之处在于:

// action提交也是mutations，不能直接修改状态

// actions可以包含任意的异步操作

// actions函数接收一个与store实例具有相同方法的属性的context属性，可以通过context.commit提交，也可以通过context.state获取state

addAsyncNum(context){

setTimeout(function(){

context.commit("addNum")

},2000)

}

}

复制代码

接着在 App组件中导入

import {mapActions} from "vuex"

然后在方法中使用

methods:{

...mapActions(["addAsyncNum"])

}

复制代码

最后在App组件中绑定方法使用就ok了

异步点击

复制代码

^_<