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: 回车进入  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，页面显示效果