Vuex 基本简单的使用

适用场景

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生成的数据也会变化；