「后端小伙伴来学前端了」Vuex 基本使用及案例，快速上手，学会使用vuex

从好看的学妹那收集的好看照片--🍉sunday🍉

前言

上篇文章说了vuex的简单原理，这篇就着重讲讲如何使用简单的vuex，看看它到底有何优秀之处吧。

我们要使用Vuex，使用流程大致是不是就是下面这几步呢？

1. npm
2. Vue.use()
3. store
4. 另外就是让所有vc都能够访问到store

一、安装

npm安装

npm install vuex --save

如果我们直接使用vue脚手架创建项目，可以在创建时就直接选择安装 vuex。

二、入门使用及案例

第二步就是引入vuex,使用插件了。

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex)

const vm =new Vue({
  store: {},
  render: h => h(App),
}).$mount('#app')
console.log(vm)
 

按照以前使用插件的过程，这样理论上是已经完成了。

但是我在后面还输出了vm，这还有玄机的。

可以看到在 Vue 中的实例上已经有$store 啦，但是在原理图中，底下还有三个对象。

我们在mian.js是不合适的，我们通常会提取出来，另外建立一个文件夹叫stroe，大家的习惯，也不是说啥规范吧。

我们在index.js中写

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}

//创建并暴露store
export default new Vuex.Store({
	actions,  // actions:actions, 由es6语法，变量名和对象名相同，可以简写 为 actions。
	mutations,
	state
})

然后我们在main.js中进行引入

import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
	render: h => h(App),
	store
}).$mount("#app")

接下来就是如何使用它啦。

就是简单做了一个点击自加的案例

index.js

//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)

//准备actions对象——响应组件中用户的动作
const actions = {
// context 在这里就是 上下文的意思  必须要填写的参数  这里不好说，大家可以打印出来看看
  increment(context,value) {
    console.log(context)
    context.commit("INCREMENT",value)
  }
}
//准备mutations对象——修改state中的数据
// 这里方法名大写也只是一种开发习惯，不能说是规范吧，为了能够让人明显分析出是调用了mutations 
const mutations = {
  INCREMENT(state,value) {                
    state.sum+=value
  }
}
//准备state对象——保存具体的数据
const state = {
  sum: 0,
}

//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state
})

写了一个Sum组件

<template>
  <div>
    <!-- 用这种太长了，所以可以写成一个计算属性，稍微方便些，后面有更加方便的方法 -->
    <h1>{{ $store.state.sum }}</h1>
    <h1>
      {{ sum }}
    </h1>

    <button @click="increment">点击自加</button>
  </div>
</template>
<script>
export default {
  computed:{
    sum(){
      return this.$store.state.sum
    }
  },
  methods: {
    increment(){
      this.$store.dispatch("increment",1)
      // 也可以直接与 mutations 通信
      // this.$store.commit('INCREMENT') 
    }
  }
}
</script>

1. 组件中读取vuex中的数据：$store.state.sum

2. 我这里用了计算属性。后面会有更加方便的方法。

3. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)

   备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

<template>
  <div id="app">
    <Sum></Sum>
  </div>
</template>
<script>
import Sum from './components/Sum.vue'
export default {
  name: 'App',
  components: {
    Sum
  }
}
</script>

实现效果

三、getters的使用

1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
2. 在store.js中追加getters配置

const getters = {
	bigSum(state){
		return state.sum * 10
	}
}
//创建并暴露store
export default new Vuex.Store({
	actions,
	mutations,
	state,
  getters
})

在组件中的使用方式$store.getters.bigSum 或者用计算属性，会更好一点点。

<template>
  <div>
    <h1>
      {{ sum }}
    </h1>
            <!-- <h1>
      展示一下sum的十倍是多少 {{  $store.getters.bigSum}}
    </h1> -->
    <h1>
      展示一下sum的十倍是多少 {{ bigSum }}
    </h1>

    <button @click="increment">点击自加</button>
  </div>
</template>
<script>
export default {
  computed:{
    sum(){
      return this.$store.state.sum
    },
    bigSum(){
      return this.$store.getters.bigSum
    }
  },
  methods: {
    increment(){
      this.$store.dispatch("increment",1)
    }
  }
}
</script>

效果：

在其他任意组件中都可以这么取值，所以说是vuex实现了任意间组件通信

不过我们每次这么手写计算属性，而且代码是这么相似，难道没有什么简单的方式吗？？？

有的有的，点这点这👉 vuex进阶 （😁）

后语

大家一起加油！！！如若文章中有不足之处，请大家及时指出，在此郑重感谢。

纸上得来终觉浅，绝知此事要躬行。

大家好，我是博主宁在春：主页

一名喜欢文艺却踏上编程这条道路的小青年。

希望：我们，待别日相见时，都已有所成。