首页 > 代码库 > vue学习---vuex之简介

vue学习---vuex之简介

2024-10-09 04:03:01   215人阅读

  

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

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

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

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

    1.安装vue 

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

         例如：F:vueDemo文件夹    cmd  F: 回车进入  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，页面显示效果

    技术分享

 

  

　

 


  

 

 

          

vue学习---vuex之简介


联系
我们