Vuex笔记【1】

Vuex笔记

1、了解Vuex

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

1.1、使用Vuex管理数据的好处：

• 能够在 vuex 中集中管理共享的数据，便于开发和后期进行维护
• 能够高效的实现组件之间的数据共享，提高开发效率
• 存储在 vuex 中的数据是响应式的，当数据发生改变时，页面中的数据也会同步更新

1.2、传统组件传值方式及缺点：

传统通过输入输出的方式传值

props：输入
$emit：输出

输入输出机制的缺点：页面复杂时，经常需要层层传递数据，因为非父子组件间的交互，只能寻找最近的祖先组件来做中转

同时，输入输出机制还有一个局限性：当不同页面的组件需要进行数据交互时，它就无能为力了。平常开发，这种输入输出的方案也基本满足了
但如果有需要跨页面的数据交互或者说，有需要数据做持久化处理的场景时；以及如果页面组件层次复杂，存在 props 和 $emit 层层传递时。这种方案其实是不好的。

2、使用Vuex——实现计数器案例

2.1、安装和配置

安装

# 项目在创建时如果没有安装vuex，需要单独安装
npm install vuex

# 补充---创建项目
vue create 项目名

新建store文件

代码如下

import Vue from 'vue'
import Vuex from 'vuex'
// 这里不要忘了引用插件
Vue.use(Vuex)
const store = new Vuex.Store({
   
	state: {
   
	},
	mutations: {
   
	}
})
export default store

引入

为了在 Vue 组件中访问this.$store property，需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以store选项的方式"注入"该 store 的机制：

修改 main.js

2.2、改写计算器案例

改写步骤：

• store 中的 state 中定义共享数据 count
• store 中的 mutaions 中定义相关 mutation
• 删除 Addtion.vue 和 Subtraction.vue 中的 props 选项（后面加也可以）
• 组件模板中使用 $store.state.count 获取 store 中 state 中的变量
• 组件中通过 this.$store.commit(mutation_name)触发 store 中的mutation (其实就是一个方法)

修改store

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
   
    state:{
   
        count: 0,
    },
    mutations:{
   
        addCount(state){
   
            state.count++
        },
        subCount(state){
   
            state.count--
        }
    }
})
export default store

修改组件

Addition.vue

<template>
  <div>
    <p>当前count变量的值是：{
   {
    $store.state.count }}<