vuex的五个属性及使用方法_2020优品购电商3.0项目-Vuex

Vuex

今天主要内容

1. vuex 实现全局状态(数据)管理

1 Vuex

1. 在vue的项目中,要处理各种各样的数据,这些数据虽然多,但是,从本质上来划分,分为两

种数据:

1)组件内部私有的数据(组件之间不会共享私有的数据)

2)组件之间共享的数据(父组件要共享和子组件的数据、子组件要共享给父组件的数据、兄弟组

件之间传值)

父向子: v-bind 属性绑定

子向父: v-on 事件绑定机制

兄弟组件之间共享数据: EventBus

$on 接收数据的那个组件

$emit 共享数据的那个组件

2. 当组件之间要共享数据的时候最好使用一个全局的数据存储对象来进行控制;

2 什么是Vuex

就是为了实现组件之间数据共享的一种机制/方式;

3 为什么要有Vuex

1、因为使用父子传值或兄弟传值,太麻烦了;不好管理,项目代码写起来太麻烦;

2、当有了 vuex ,想要共享数据,只需要把数据挂载到 vuex 就行;想要获取数据,直接从vuex

上拿就行;

3、当 vuex 中的数据被修改之后,其它引用了此数据的组件,也会被同步更新;

4、注意:只有组件间共享的数据,才有必要存储到vuex中,组件自己私有的数据,还是要存储

到自己的data中;

JAVA中是static关键字,内容常驻内存,直接通过类名.属性名 类型.方法名直接访问,但是此种情况下,垃圾回收机制失效

4 如何在项目中使用Vuex

4.1 认识Vuex

1. 运行npm install vuex

2. 在store/index.js中导入 vuex

import Vuex from 'vuex'

3. 在store/index.js中使用Vuex

Vue.use(Vuex)

4. 在store/index.js中创建store公共状态对象

export default new Vuex.Store({

state: { // state 中存放的,就是全局共享的数据,可以把 state 认为 是组件中的 data

count: 0

}

})

5. 在main.js中将 创建的 store 挂载到 vm 实例上

new Vue({

router,

store,

render: h => h(App)

}).$mount('#app')

6. 如果想要在组件中访问全局的数据:

this.$store.state.全局数据名称

4.2 案例

说明:创建两个组件,一个组件上 添加 ‘+’按钮 并且显示数字;另外一个组件添加 ‘-’按钮并且显示

数字,然后点击 + 数值就加,点击-数值就减

第一步:创建Add.vue组件和Minus组件

6a8673e3cbabe7411ca521d005045743.png

Add.vue

当前最新的count值:

Minus.vue

当前最新的count值:

第二步:为了能够在App.vue页面显示两个组件,需要进行如下设置

在router/index.js中进行如下定义

import add from '@/components/Add.vue'

import minus from '@/components/Minus.vue'

Vue.use(VueRouter)

const routes = [

{

path: '/',

name: 'test',

components:[

add,

minus

]

}

]

在app.vue中进行如下配置

5 在组件中访问store中state上的属性

5.1 方式介绍

5.1.1 第一种方式(不推荐)

this.$store.state.数据的名称

5.1.2 第二种方式(推荐)

按需导入 mapState 辅助函数:

import { mapState } from "vuex";

创建一个computed属性,通过mapState ,结合 ... 展开运算符,把需要的状态映射到组

件的计算属性中:

computed: {

// 自定义的计算属性

newMsg: function() {

return "----" + this.msg + "------";

},

// 通过 展开运算符,把 state中的数据映射为计算属性,这样,能够让自己的计算属性和store中的

属性并存

...mapState(["count"])

}

5.2 应用

第一步:在store/index.js的state中定义count

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

state: {

count:1

},

mutations: {

},

actions: {

},

modules: {

}

})

第二步:在add.vue组件中显示count

这种方式可以显示,但是官方不推荐,官方推荐使用第二种方式

当前最新的count值:{{$store.state.count}}

6 修改store中state上的值--mutations

6.1 方式介绍

6.1.1 第一种方式

使用this.$store.commit('方法名') 来调用 mutations 中的方法

6.1.2 第二种方式

使用mapMutaions 来映射方法到methods 中

import { mapMutations } from "vuex";

映射 mutations 方法到 methods 中

methods: {

...mapMutations(["add"])

}

6.2 应用

第一步:直接通过$store.state.count方式去加

当前最新的count值:{{count}}

第二步:这种方式也可以修改如下

template>

当前最新的count值:{{count}}

第三步:上述两种方式官方并不推荐,官方推荐使用mustations中定义的方法修改state的数据

所以在store/index.js 的 mutations中定义方法如下

import Vue from 'vue'

import Vuex from 'vuex'

//use 是Vue的静态方法

Vue.use(Vuex)

// 创建一块区域,用来存放公共数据

export default new Vuex.Store({

// 所有的全局需要共享的数据,都应该放到state中

state: {

count:10,

msg:"传智大学,一统江湖,千秋万载"

},

// 在mutations中定义方法,相当于组件的methods

// 对state中的数据的修改 ,只能由mutations操作

mutations: {

// 方法必须要有一个参数,就叫state ,指的就是state

add(state){

state.count++

},

addN(state,step){

state.count += step

}

},

actions: {

},

modules: {

}

})

第四步:在add.vue中调用mutations方法

@click="addHandler()"

>

Vuex中的count值:{{count}}--

{{msg}}

第五步:针对上述方式,官方也不推荐,官方推荐mapMutations的方式调用

@click="addN(100)"

>

Vuex中的count值:{{count}}--

{{msg}}

7 定义和使用 actions 来提交异步的操作

7.1 方式介绍

7.1.1 使用方式1

通过this.$store.dispatch('Action方法名称', 参数) 来访问,专门调用 actions 中方法的

7.1.2 使用方式2

使用mapActions 来映射为计算属性:

import { mapActions } from "vuex";

methods: {

...mapActions(["asyncSubtract"])

}

7.2 应用

8 定义和使用getters

8.1 方式介绍

8.1.1 使用方式1

通过 this.$store.getters.名称 来访问

8.1.2 使用方式2

使用mapGetters 来映射为计算属性:

import { mapState, mapGetters } from "vuex";

computed: {

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

...mapGetters(["countinfo"])

}

8.2 应用

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页