Vuex的核心概念及使用方法

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

vuex是可以存储复杂数据类型（如数组、对象），所以不用把存储的数据转换为字符串再存储（这一点和缓存不同，缓存需要转换成字符串再存储）。

Vuex的五个核心概念：state、getters、mutations、actions、modules；

1、state: vuex的基本数据，用来存储变量；

2、getters: 从基本数据（state）派生的数据，相当于state的计算属性；

3、mutations: 提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的事件类型（type）和一个回调函数（handler）。

回调函数就是我们实际进行状态更改的地方，并且它会接受 state作为第一个参数，提交载荷作为第二个参数。

4、action: 和mutation的功能大致相同，不同之处在于 ①Action提交的是mutation，而不是直接变更状态，②Action可以包含任意异步操作。

5、modules: 模块化vuex，可以让每一个模块拥有自己的 state、mutation、action、 getters，使得结构非常清晰，方便管理。

vuex的创建步骤：

新建vue项目testProject ---> 在testProject中建store文件夹

--->①store下新建state.js文件（声明变量，以键值对方式存储，以对象的方式导出）

---> ②store下新建mutations.js（保存所有的方法，用来改变state中的变量值）

--->③store下新建actions.js（暴露给用户使用，以此触发mutations.js中的方法，保存数据，可异步操作）

---> ④store下新建index.js（引入创建的模块，暴露出store，共vue注册后全局使用）

---> ⑤main.js中引入store/index.js

①state.js

export default {
  TempData: '', // 变量
  tempA: {}, // 变量
  tempB: [], // 变量
  tempC: false, // 变量
};

②mutations.js

export const saveTempData = (state, TempData) => {
  state.TempData = TempData;
};

export const saveTempA = (state, tempA) => {
  state.TempA = tempA;
};

export const saveTempB = (state, tempB) => {
  state.TempB = tempB;
};

export const saveTempC = (state, tempC) => {
  state.TempC = tempC;
};

③actions.js

export const saveTempData = ({ commit }, payload) => {
  commit('saveTempData', payload);
};

export const saveTempA = ({ commit }, payload) => {
  commit('saveTempA', payload);
};

export const saveTempB = ({ commit }, payload) => {
  commit('saveTempB', payload);
};

export const saveTempC = ({ commit }, payload) => {
  commit('saveTempC', payload);
};

上面是commit的方法，是直接触发；还有一种context方法，是通过上下文来触发事件，好像很少用。

export const saveTempData = ({ context }, payload) => {
  commit('saveTempData', payload);
};

④ / store / index.js

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import * as actions from './actions';
import * as mutations from './mutations';
 
Vue.use(Vuex);
 
export default new Vuex.Store({
  state,
  actions,
  mutations
});

⑤main.js

// 引入store
import store from './store/index';
 
new Vue({
  el: '#app',
  router,
  store,   // 使用
  render: h => h(App)
});

vuex的使用步骤：

（1）保存数据到vuex，一般使用法1

法1：this.$store.dispatch('saveTempData', this.tempData); // 注意引号中写的是action中定义的方法名

法2：

使用辅助函数mapActions

import { mapActions } from 'vuex';
// 1、通过methods方法添加映射关系 
methods: {
    ...mapActions(['saveTempData'])   // 注意saveTempData变量名不能和methods里面方法名重复
}
// 2、使用
this.saveTempData = this.aaaa   // 把aaaa存储到方法saveTempData中的变量

（2）获取数据，也就是从vuex中拿数据

法1：this.$store.state.TempData // 这里拿数据写的变量名是在state中定义的变量名

template中写法是去掉this直接加双括号--{{$store.state.TempData}}

法2：

使用辅助函数mapState

import { mapState } from 'vuex';
data(){
    return{
        TempDatatemp:'',
    }
},
 // 计算属性
computed: {
    ...mapState(['TempData']),
},
watch: {
    TempData(currVal) {
        // 监听mapState中的变量，当数据变化（有值、值改变等），
        // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
      this.TempDatatemp = currVal;   //双向绑定数据，把vuex中的TempData赋值给TempDatatemp，两数据变化统一
    }
}
// 然后在页面中就可以使用TempDatatemp了

tips：

问：有关vuex刷新页面之后数据丢失的问题

答：vuex+缓存，具体见前端有关解决Vuex页面刷新之后数据丢失的问题_小小红色无花果的博客-CSDN博客