Vuex配置和基本使用

在学习vuex之前，我们需要先了解一下vuex是什么。在vuex的官网，他是这样定义的：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。说的非常高大尚，我个人的理解就是将数据集中管理，然后通过某些特地的api可以使用到这其中的数据，对其进行某些操作。那么这样做有什么意义呢？首先是公共的数据能够集中管理，使用api使在该项目中的每一个所需要该数据的组件都能够使用，下面我们来讲一下如何使用该插件。

1、安装和配置Vuex

1) vuex是一个插件，所以我们需要通过npm指令安装。

npm i vuex

2) 在main.js人口文件引入Vuex，插件需要应用就需要将插件应用Vue.use(Vuex)，这个是直接在main.js直接写Vuex的部分代码，不符合模块化这个思路，所以不建议这样去写。在开发中如果使用到vuex，一般是创建一个名为store的文件夹，在此文件夹下有一个index.js文件，在这写对应的vuex代码。

import Vue from 'vue'
import App from './App.vue'
// 引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {

}
const mutations = {

}
const state = {
  perosn: {
    name: '张三',
    age: 18,
    sex: '男'
  }
}

const store = new Vuex.Store({
  actions, mutations, state
})


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

console.log(vc);

3) 这里是使用模块化写vuex代码，使用的是默认暴露，有一个要点要说一下，Vue.use必须写在这个文件里面，如果在main.js写Vue.use(Vuex)，由于框架先解析import里面文件，在外面写的Vue.use(Vuex)不能被里面的识别到，所有会报错。到这里Vuex的配置就好了，下面我们写组件来观察这个Vuex中的数据如何获取和修改。

// 这里写关于store的代码

// 引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {

}
const mutations = {

}
const state = {
    person: {
        name: '张三',
        age: 18,
        sex: '男'
    }
}
export default new Vuex.Store({
    actions, mutations, state
})

配置完成后在控制台输出Vue对象可以看见

2、数据的获取

我们在store->index.js->state中存储的person数据，最后都出现在$store->state->person中，那么我们在组件中想获取数据可以通过在mounted钩子中将此数据重新赋给data中新定义的对象，或者通过$store.state.person的方法将数据取出。

 3、数据的修改

这里数据修改需要了解Vue工作原理，state是存放数据的地方，Vue Components是定义的组件，在组件中需要通过this.$store.dispatch();将数据传递给Actions,在这个地方可以经过一些逻辑处理，以及发送ajax请求，将数据处理后继续向下传递，dispatch()传递两个参数，第一个传递个下一个函数的函数名，第二个参数传递数据。在Actions中，我们使用commit向Mutations传递数据，并在这里将数据直接修改，然后会自动传递给State，数据修改就算完成了。

 1) Student.vue中的代码

<template>
  <div>
    <h1>这里是Student组件</h1>
    <h2>学生信息</h2>
    <h3>姓名：{{ $store.state.person.name }}</h3>
    <h3>年龄：{{ $store.state.person.age }}</h3>
    <h3>性别：{{ $store.state.person.sex }}</h3>
    <!-- 点击触发click事件触发回调 -->
    <button @click="updateName">修改姓名</button>
    <button @click="addAge">年龄增长</button>
    <button @click="changeSex">性别转变</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  methods: {
    //   点击触发的回调
    updateName() {
      // 从组件向Acitons传递数据
      this.$store.dispatch("name", "~");
    },
    addAge() {
      // 从组件直接向Mutations直接传递数据
      this.$store.commit("ADDAGE", 1);
    },
    changeSex() {
      this.$store.dispatch("sex");
    },
  },
};
</script>

<style></style>

2) store->index.js代码

// 这里写关于store的代码

// 因引入vue
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// Actions
const actions = {
    // 组件传递过来的,函数必须为name,是有组件dispatch()第一个参数决定
    // 函数有两个参数 第一个是上下文对象，第二个是dispatch()第二个参数传过来的数据
    name(context, value) {
        console.log(context, value);
        context.commit('NAME', value)
    },
    // 组件传递过来的,函数必须为name,是有组件dispatch()第一个参数决定,前面没有传递参数，则第二个没有数据
    sex(context) {
        if (context.state.person.sex === '男') {
            context.commit('SEX', '女')
        } else {
            context.commit('SEX', '男')
        }
    }
}
// Mutations
const mutations = {
    NAME(context, value) {
        context.person.name += value
    },
    // 逻辑简单，直接+1可以不经过Actions直接进入Mutations
    ADDAGE(context, value) {
        context.person.age += value
    },
    SEX(context, value) {
        context.person.sex = value
    }
}
// State
const state = {
    person: {
        name: '张三',
        age: 18,
        sex: '男'
    }
}
export default new Vuex.Store({
    actions, mutations, state
})

 4、总结

最后我们来展示一下显示结果

 如有误，请斧正！！！