Vuex的基本使用

QM_姚丹

于 2019-09-18 10:43:53 发布

阅读量158

点赞数

分类专栏： # vue

本文链接：https://blog.csdn.net/qq_34475058/article/details/100975267

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vuex主要是实现数据持久化和组件之间数据共享的插件。
使用方式，

首先安装vuexnpm install vuex --save
然后引入vuex

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

Vue.use(Vuex);

创建一个状态或者数据管理器，比如这里count

var state= {
	//举个例子，比如记录一个count数值
    count: 0
  }

用mutations来管理一些方法，这些方法可以管理状态或者数据

var mutations= {
	//新建一个方法，用来给count计数
    increment () {
      state.count++
    }
  }

然后暴露出去

const store = new Vuex.Store({
    state: state,
    mutations: mutations
  })

  export default store;

其他组件导入store,在js里面和data同级，写入store

//获取count的值
this.$store.state.count
//调用increment的方法
this.$store.commit('increment')

store.js完整代码

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

Vue.use(Vuex);

var state= {
    count: 0
  }

var mutations= {
    increment () {
      state.count++
    }
  }


  const store = new Vuex.Store({
    state: state,
    mutations: mutations
  })

  export default store;

在组件内调用vuex的代码

<template>
  <div>
     <mt-button  v-on:click="addCount()">vuex数量加一</mt-button>
     <h3>{{this.$store.state.count}}</h3>
  </div>
</template>
<script>

import store from './../../vuex/Store.js';
export default {
//注意导入store
  store,
  methods: {
    addCount(){
        this.$store.commit('increment')
    }
  }
};
</script>