vue中使用vuex(简单明了)

vuex是使用vue中必不可少的一部分，基于父子、兄弟组件，我们传值可能会很方便，但是如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，那么vuex就很好的解决了我们这种问题，它相当于一个公共仓库，保存着所有组件都能共用的数据。

那么，我们一起来看看vue项目怎么使用它吧，新手小白快速上手。
一、适合初学者使用，保存数据以及获取数据

1、在store文件夹，新建个index.js文件（命名看个人习惯，如果没有该文件夹，可以新建一个，当然也可以不建文件夹，直接新建个js文件也是可以的）

在新建的js文件中写入如下代码:

import Vue from "vue"
import Vuex from "vuex"
 
Vue.use(Vuex);
 
export default new Vuex.Store({
    state:{
        Pattern:"page",
    },
    mutations:{
        setPattern(state,data){
            state.pattern = data.pattern
        },
    }
})

这里解释一下各个代码段的作用：state是自定义的一些变量，需要用来保存数据，mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据，参数的话，第二个参数就是用户传入的值，然后在方法中赋值给state中的变量

2、main.js引用：（注意路径即可）

import Vue from 'vue'
import App from './App.vue'
import router from "./router";

import store from './store/index';

Vue.config.productionTip = false

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

3、保存数据：（场景举例：当我点击按钮后，我需要把当前的数据保存到vuex中，然后其他页面中可以通过this.$store.state.pattern需要拿到这个数据）

<template>
  <div>
    欢迎来到Home页面--vuex使用
    <button @click="saveData">点我吧数据放到vuex中</button>
    
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    saveData() {
    // 把数据存储到vuex中
      this.$store.commit("setPattern", { pattern: "questionnaire" });
    },
  },
};
</script>

这里的第一个参数是要触发的方法，也就是上面mutations中的方法，第二个参数是你要传递的数据

4、获取变量：（当数据初始获取不到时，可以使用计算属性用来获取）

<template>
  <div>
    欢迎来到Search页面
    <p style="color: green">vuex中的数据是：{{ this.$store.state.pattern }}</p>
  </div>
</template>

最后，如果项目没有安装vuex，请先安装：npm install vuex --save