vue——vuex安装及使用

一、vuex 的理解

官方解释：vuex是一个专为vue.js应用程序开发的状态管理模式。采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的理解：全局变量，同 angular 中的根元素 $rootScope 

例如： 有 模块a 和 模块b，想让 模块b 获取 模块a 的数据。

这时候我们就可以定义 全局变量，模块a 的数据 赋值给全局变量 x，然后 模块b 再获取 x 。【 我们把 模块a 的数据叫 state，全局变量叫 store。模块b 叫 data 】

二、安装

在终端通过cd命令进入到项目里，然后使用以下命令进行安装：

npm install vuex --save

--save 参数的作用是在我们的包配置文件 package.json 文件中添加对应的配置。安装成功后， 可以查看 package.json 文件，你会发现多了"vuex": "^2.3.1"的配置：

"dependencies": {
    "vue": "^2.3.3",
    "vue-resource": "^1.3.4",
    "vue-router": "^2.7.0",
    "vuex": "^2.3.1"
  },

三、使用

1、注册

在 main.js 文件中导入并注册 vuex：

import Vuex from 'vuex'

Vue.use(Vuex)

2、项目中调用

（1）在项目中的 src 目录下，创建 store.js文件：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment:state => state.count ++,
    decrement:state => state.count --,
  }
})

上面这段代码比较简单，首先导入并注册 vuex，再导出一个 vuex 实例，这个实例在 state 中定义了 count属性，其作用是用来计数的，然后在mutations中定义了两个方法，increment是对count进行加1处理，decrement是对count进行减1处理。

（2）在 main.js导入：

import store from './store'

注意：store 的路径要注意写对。

并且在 vue 实例中添加store属性，即可在全局的所有子组件中使用这个了：

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

（3）在子组件中简单的使用我们定义的store：

<template>
  <div>
    <strong>{{ count }}</strong>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>
  </div>
</template>

<script>
    export default {
        name: "login",
        data(){
          return{
            localCount:2
          }
        },
        methods: {
          increment: function (){
            this.$store.commit('increment')
          },
          decrement: function (){
            this.$store.commit('decrement')
          }

        },
        computed:{
          count: function (){
            return this.$store.state.count
          }
        }
    }
</script>

四、效果

   点击按钮+1-1