有关vuex

Vuex 是一个专门为 Vue 应用程序开发的状态管理模式,适合开发大型单页应用, 它能够更好的在组件外部管理状态

重要文件版本。

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

  1. Vuex的状态储存是响应式的,当 Vue 组件从 store 中读取状态时,若store中的状态发生变化,那么相应的组件也会得到高效更新
  2. 不能直接改变 store 中的状态,改变 store 中状态的唯一途径就是显式的提交(commit)mutation 这样可以更方便的跟踪状态的变化

vuex中的state、action、mutation的关系。

state负责存储整个应用的状态数据,要注意在入口文件main.js注入store对象,就可以在根组件下的子组件使用this.$store.state获取状态了。

mutation里面写着改变状态数据的方法(一定要写在这里),mutation是同步事件要注意,里面的方法不能写异步的,组件中触发一个mutation的方法store.commit(mutationName)。

action也是一个改变状态数据的事件,但不同的是action改变状态是通过调用mutation来实现的,注意action是个异步事件。直接触发action就使用this.$store.dispatch(actionName)。

三,vuex的简单使用

1,下载安装

npm install --save vuex
//注意要带save

2,src目录下建文件夹和文件结构是src/store/store.js,store.js代码如下:

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increase (state) {
      state.count++
    }
  },
  actions: {
    actionIncrease ({commit}) {
      commit('increase')
    }
  }
})
export default store

3,在入口文件main.js引入,并挂载到根节点

import Vue form 'vue';
import Vuex from 'vuex';
import store from './store/store.js'
Vue use(Vuex);
new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

4,子组件调用状态值count,并通过点击触发action提交mutation来增加数值 
子组件模板:

<template>
  <span>{{count}}</span>
  <button @click="add">增加数值</button>
</template>
<script>
  export default {
    computed:{
      count () {
        return this.$store.state.count;
      }
    },
    methods: {
      add() {
        this.$store.dispatch('actionIncrease')
      }
    }
  };
</script>
ok,以上就是vuex的简单使用了,别的组件如需调用或修改vuex的数据状态也依此法使用。

 

posted on 2018-06-28 16:53  大风hhh  阅读(107)  评论(0编辑  收藏  举报

导航