Vuex 基本简单的使用

2020-04-30  本文已影响0人  五四青年_4e7d

适用场景

1.全局共享数据,抛开繁琐的组件传值;
2.什么数据适合全局共享?(组件的共享数据);
3.好处?(谁要用,直接获取,组件修改其他的也变化);
4.数据管理集中化,全局管理方便;

如何在项目中使用vuex

1.下载

cnpm  i vuex -S

2.导入,挂载vuex(main.js中)

//导入vuex
import Vuex from 'vuex'
//把vuex安装到vue中:
Vue.use(Vuex)

3.创建store对象

//创建一个store实例用来全局存储;
const store = new Vuex.Store({
  state: {
    number:5,
           }
    })

4.将store挂载到vm上

 //store挂载到vm上,才能在每个组建中通过this.$store.state.公共数据名称
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App),
  store  
})

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

.vue组件调用:(第一种直接使用)

<template>
  <div>
     {{this.$store.state.number}}
  </div>
</template>

.vue组件调用:(第二种导入辅助函数)

import {mapState} from 'vuex'    //按需导入辅助函数和计算属性配合
 // 调用 mapState 函数和展开运算符
  computed:{
   ...mapState(['number']) 
  }

页面直接使用

<div>{{number}}</div>

mutations:如果要修改state的数据需要在store中调用方法

全局定义使用:

const store = new Vuex.Store({
  state: {
     chuanc:10,
    },
  mutations: {
    add(state){
      state.chuanc += 2
     },
    }
})

调用辅助函数mapMutations

import {mapState,mapMutations } from 'vuex'    //按需导入辅助函数和计算属性配合

调用方法:

 methods: {
   ...mapMutations(['add']) 
  },
// 调用 mapState 函数和展开运算符
  computed:{
   ...mapState(['chuanc']) 
  }

组件展示:

<div>
     {{chuanc}}
     <button @click="add">添加</button>
  </div>

getters的使用(相当于计算属性):

1.getters中定义的方法,就相当于vue的计算属性;
2.getters变化了那么getters生成的数据也会变化;

上一篇下一篇

猜你喜欢

热点阅读