vue2 vuex 安装使用教程

一，vuex 官网          Vuex 是什么？ | Vuex (vuejs.org)

二，vuex 都可以干什么

      vuex 不但是可以存储数据  方便复用  还可以进行兄弟组件之间传值

三，传统的组件之间的共享数据方式

1. 父向子传值： v-bind

2. 子向父传值：v-on

3. 兄弟组件之间共享数据：EvenBus

4. $on 接受数据的那个组件

5. $emit 发送数据的那个组件

缺点：只能通过父传子 和 子传父的方式传值，若想要两个毫无关系的组件传值则很繁琐（需要找到 他们之间

四，全局事件总线和 vuex 插件的区别

全局事件总线关注点：组件和组件之间数据如何传递，一个绑定$on，一个触发$emit。数据实际上还是 在局部的组件当中，并没有真正的让数据共享。只是数据传来传去。

 -------------------------------------------------------------------------------------------------------------------------

使用讲解

安装

npm

npm install vuex@next --save

yarn

yarn add vuex@next --save

安装好之后可以查看一下  自己安装的版本

功能介绍 

State  

用与存放公共的数据，类似于 vue 中的 data 属性

mutations

用于变更 Store 中的数据

Getter

Getter 用于对Store 中的数据进行加工梳理形成的新数据

Action

触发 actions 异步任务时携带参数：

1. Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性
2. Store 中数据发生变化，Getter 的数据也会发生变化
3. Getter 不会修改 Store 中的数据，它只起到包装的作用

 main.js  如果安装框架的话直接安好了 就不需要自己在引入main.js

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

Vue.config.productionTip = false

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

store.js   干净 没有多余代码

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

store.js  定义数据版本

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

Vue.use(Vuex)

export default new Vuex.Store({
  // 定义初始数据
  state: {
    num: 0
  },
  // 定义计算方式
  mutations: {
    PLUS_ONE(state, val) {
      state.num += val
    }
  },
  actions: {
    // 定义 方法
    plusOne(context, val) {
      val = val + 1
      context.commit("PLUS_ONE", val)
    }
  }
})
---------------------------------------------------------
// 第二种写法方式
// 创建store对象, 管理三个核心对象
// const store = new Vue({
//     //负责执行某个行为的对象
//     actions: actions,
//     //负责更新的对象
//     mutations: mutations,
//     //状态对象
//     state: state
// })
// //导出store
// export default store
//简写形式
// export default new Vuex.Store({ actions, mutations, state })

页面

<template>
  <div>
    <!-- 引用数据 -->
    <h1>数字：{{ $store.state.num }}</h1>
    <!-- 调用方法 -->
    <button @click="plusOne">点击加1</button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      // 从新定义值 等一下可以赋值
      counter: 0,
    };
  },
  methods: {
    plusOne() {
      // this.$store.state.num++;
      // 调用 vuex的方法   this.counter 相当于一个基础数值 
      this.$store.dispatch("plusOne", this.counter);
    },
  },
};
</script>

效果展示

参考

Vue：vuex_安装vuex_IsLuNaTiC的博客-CSDN博客