Vuex和单纯的全局对象有啥区别

Posted 2023-04-11

参考技术A Vuex和全局对象主要有两大区别：

1、Vuex的状态存储是响应式的。当Vue组件从Store中读取状态的时候，若Store中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2、不能直接改变Store中的状态。改变Store中的状态的唯一途径就是显示地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

vue学习---vuex之简介

  

     每一个 Vuex 应用的核心就是 store（仓库）。"store" 基本上就是一个容器，它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同：

1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交(commit) mutations。

 下面就实现一个计数功能简介这两句话：

    1.安装vue 

         我采用的是cmd安装方式，在你想要建立的工程下，全局安装vue 

         例如：F:vueDemo文件夹    cmd  F: 回车进入  cd  vueDemo  进入vueDemo    输入下面代码安装vue

        npm install vue-cli -g     

       测试是否安装成功  vue -V   成功会显示版本号（这里是2.X的版本）

    2. vue init webpack vuexDemo         vuexDemo是工程名

   3.cd vuexDemo  进入工程

   4.cnpm install   镜像安装   等待安装所有依赖的包

   5.npm run dev    会自动选择浏览器，运行在本地8080 端口上，会看到页面

   6.Ctrl + c 可结束运行  因为此时没有安装vuex,结束运行，安装vuex

   7.cnpm install  vuex  成功后，直接第五步即可.

  

  8.建立的工程目录如下：在src下新建一个store.js文件用于状态管理

   

 9.在store.js 文件中，引入vue vuex ，其代码如下：

　

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

//使用vuex模块
Vue.use(Vuex);

//声明静态常量为4  要是访问它，称为 访问状态对象
const state = {
    count : 4
};

//定义一个方法，在vue中，唯一的定义状态的方法就是提交一个mutations,
//而且导出时，只要导出mutations即可，
//当使用时，也仅仅只要使用统一的 $store.commit(\'event\') event是事件名称。

//要是访问它 ，称为触发状态
const mutations = {
    add(state){
        state.count ++;
    },
    sub(state){
        state.count--;
    }
};


//导出一个模块
export default new Vuex.Store({
    state,
    mutations
})

 

10.在main.js 中引入 store.js 

     

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'

//引入仓库文件
import store from \'./store.js\'

/* eslint-disable no-new */
new Vue({
  el: \'#app\',
  store,            
  render:xx=>xx(App) //直接绑定一个节点进行渲染一个组件，将App.vue这个组件直接渲染进in                           dex.html下id="app"的节点下
})

 

11.在App.vue文件中，测试状态

  

<template>
  <div id="app">
     <div id="appaaa">
        <h1>这是vuex的示例</h1>
        <p>调用常量 {{$store.state.count}}</p>
        <p>
            <button @click = "$store.commit(\'add\')">加</button>
            <button @click = "$store.commit(\'sub\')">减</button>
        </p>
    </div>
  </div>
</template>

 

12，页面显示效果