vue.js如何安装vuex?

vue.js如何安装vuex?下面本篇文章给大家介绍一下在vue.js中安装和使用vuex的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

这个状态自管理应用包含以下几个部分:

state,驱动应用的数据源;

view,以声明方式将state映射到视图;

actions,响应在view上的用户输入导致的状态变化。

安装

在终端通过cd命令进入vue的my-demo项目目录里,然后使用以下命令进行安装:

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"
  },

使用

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

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

你不能直接改变 store中的状态。改变store中的状态的唯一途径就是显式地提交(commit) mutations。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

注册

通过以上步骤,我们已经安装好了vuex,但是在vue-cli中我们如何使用呢?

首先,我们需要在main.js文件中导入并注册vuex:

import Vuex from 'vuex'
Vue.use(Vuex)

项目中调用

我们在项目中的src目录下,创建store目录,用在store目录中创建store.js文件,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处理。

然后我们需要在main.js导入这段内容。

import store from './store/store'

再然后我们vue实例中添加store属性,即可在全局的所有子组件中使用这个了。

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

接下来,我们就在DemoHome组件中来简单的使用我们定义的store:

<template>
  <div id="home">
    <div class="page-header">
      <h2>首页</h2>
    </div>
    <div class="panel-body">
      <p>{{ count }}</p>
      <p>
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
      </p>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'
  export default({
    name:'home',
    data:function () {
      return {
        localCount:2
      }
    },
    methods:{
        increment(){
          this.$store.commit('increment')
        },
        decrement(){
          this.$store.commit('decrement')
        }
    },
    computed:{
        count(){
            return this.$store.state.count
        },
    }
  })
</script>
<style scoped>
  #home{
    width: 80%;
    margin: 0 auto;
  }
</style>

运行结果如下:

1.png

点击+和-,即可看到效果,我们发现我们两个按钮通过store修改同一个count,数据完全同步。当然了,如果在同一个组件中实现这样的功能并不难。但是,如果是很多个组件都有可能修改或展示这样的同一个数据,而且还要求数据要同步,可能我们费点力气通过组件的通讯也能实现,但是太麻烦,而且还容易报错,但是用了vuex的话一切就变的简单了。

更多web前端相关知识,请查阅 HTML中文网 !!

以上就是vue.js如何安装vuex?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » Vue.js 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏