vuex的简述

什么是vuex？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。它的核心是 store（仓库）。”store” 基本上就是一个容器，它包含着应用中大部分的状态(state)，改变 状态的唯一途径就是显式地提交(commit) mutations。(详细介绍见：http://vuex.vuejs.org/zh-cn/)

如何安装vuex？

借助npm安装vuex，执行命令：npm install –save vuex
该命令将vuex安装为依赖模块。

如何使用vuex?

以下是vuex的简单示例：

store.js文件：

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

Vue.use(Vuex)

export default new Vuex.Store({
　 state:{
    　 count: 0
　 },
　 mutations:{
    　 CHANGE_COUNT: (state)=>state.count++
　 },
　 actions:{
    　 changeCount: ({commit})=>commit('CHANGE_COUNT')
　 }
})

index.vue文件：

<template>
  <div>
      <p>{{$store.state.count}}</p>
      <p><input type="button" value="提交" @click="changeCount" /></p>
  </div>
</template>

<script>
export default {
    methods: {
        changeCount(){
            this.$store.commit('CHANGE_COUNT')
        }
    }
}
</script>

main.js文件：

import Vue from 'vue'
import Router from 'vue-router'
import App from './index'
import store from './store'

Vue.use(Router);
const routes = [
    {
      path: '/',
      name: 'App',
      component: App
    }
];
new Vue({
  el: '#app',
  router: routes,
  store,
  template: '<App/>',
  components: { App }
})

本文概念参照网址：http://vuex.vuejs.org/zh-cn/