学习前端之Vuex的理解与简单使用

Vuex的理解：

用于保存全局数据，全局可用。使用场景：

1. 多个组件依赖于同一状态。
2. 来自不同组件的行为需要变更同一状态。

学习主要内容：

1. 安装Vuex（这里用的是vuex3）

npm i vuex@3

2. 搭建vuex环境：在vue项目中src文件夹创建文件夹store：src/store/index.js
3. import Vue from 'vue' //在index.js引入vue核心库
4. import Vuex from 'vuex' //引入vuex
5. Vue.use(Vuex) //应用vuex插件

创建actions、mutations、state对象

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)
//创建actions---该对象用于响应组件用户的动作
const actions = {
    
}
//创建mutations ---该对象用于修改state中的数据
const mutations = {
    
}
//创建state ---该对象用于保存具体的数据
//state 有默认data数据
const state = {
    data:{
      name:'大猪',
      age:'22'
    }
}
//创建并暴露store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

在main.js中创建Vue时候传入store

import Vue from 'vue'
import App from './App.vue'
import store from './store';

Vue.config.productionTip = false

new Vue({
  el: '#app',
  store,
  render: h => h(App)
});

---

vuex简单使用：

Vue components中使用：

<template>
  <div class="box">
    <button @click="testVuex">点我测试vuex</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      age:12 //定义一个初始数据
    };
  },
  methods: {
    testVuex(){
      this.$store.dispatch('addAge',this.age) 
      //向action dispatch('action定义的函数名addAge',携带的参数)
    },
};
</script>

Vuex：

import Vue from 'vue'
import Vuex from 'vuex';

Vue.use(Vuex)

const actions = {
    addAge(a,data){
      console.log('a',a);
      console.log('data',data);
      let newage = data +1;
      a.commit('newAge',newage)//将新的 newage提交给 Mutations
    }
}

addAge两个console.log输出为红框所示：

a–代表是收到的上下文（不细说，大概是用于提交的一种媒介吧）；data 12—就是我们dispatch时候提交的data数据。
let声明新的 newAge 使得等于 data+1;
a.commit 提交至 Mutations：

const mutations = {
     newAge(b,data){
      console.log('mutations',data);
      let fage = data+10;
      state.data.age = fage; //直接修改state里data.age的数据
     }
}

可以看到 actions提交过来的data已经变成了 13；

state.data.age直接修改state里data.age的数据

可以看到age已经变成了23

---

小结：

Vuex的提交路径大概为：
VueCompon=(dispatch)=>Action=(commit)=>Mutations=(mutate)=>State

基本的使用总结：

1. 组件中读取vuex中的数据：this.$store.state.属性名
2. 组件中修改vuex中的数据：this.$store.dispatch(‘action中的方法名’,数据data)
3. 当然也可以直接提交到mutations中：this.$store.commit(‘mutations中的方法名’，数据data)
   ps：业务逻辑一般写在actions中，如无逻辑可直接commit提交。

至此，vuex简单学习完毕。