vue学习---vuex之简介

Posted 风起了--

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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,页面显示效果

    

 

  

 

 


 
 

 

 

          

以上是关于vue学习---vuex之简介的主要内容,如果未能解决你的问题,请参考以下文章

Vue之Vuex的使用

vue学习 之 vuex安装及使用

前端框架Vue自学之Vuex

Vue第八天学习笔记之Promise和Vuex详解

Vue第八天学习笔记之Promise和Vuex详解

学习笔记之Vuex总结(Vue状态管理)