安装vuex 和 vuex的简单使用

安装

npm install vuex --save

或者

cnpm i vuex -S

使用方法

约定俗成这样使用

第一步
在vue项目的src文件夹中,创建一个名为store的文件夹,

第二步
在这个文件夹下创建一个index.js文件,这个文件专门用来配置vuex的相关内容

第三步
在index.js完成vuex的基础配置

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex的插件
Vue.use(Vuex)
//创建一个store对象
const store = new Vuex.Store({
//	定义的公共变量
  	state: {
  	  count: 0
  	},
//  state中的变量只能在mutations中通过方法修改  	
  	mutations: {
  		changeCount: function (state) {
  		state.count++
  		}
  	},
  	actions: {
  		
  	},
  	getters: {

  	}
})
//导出这个对象
export default store

第四步引入 挂载
一定要挂载到main.js中的vue实例中,
完成main.js的引入和挂载

import store from './store/index.js'
new Vue({
  el: '#app',
  router,//挂载路由
  store,//挂载vuex
  components: { App },
  template: '<App/>'
})

基础配置就差不多完成了

第五步 简单的使用
在要使用 vuex的组件里面写上下面的代码

<template>
<div>
	{{count}}
	<button @click="change"></button>
</div>
<template/>
<script>
export default {
  data () {
    return {
      radio: 3,
      count: this.$store.state.count
    }
  },
  methods: {
  //在组件中控制vuex中state的数据,必须调用方法
  	change: function () {
  //方法this.$store.commit(),
  //传的参数就是要调用的vuex中store对象下mutations下面的方法	
  		this.$store.commit('changeCount')
  	}
  },
  //使用watch方法监听vuex中state的变化
  watch: {
		'$store.state.count' () {
			console.log(1111)
			this.count = this.$store.state.count
		}
  }
//使用computed方法检测vuex中state的变化
//computed: {
//	count () {
//	return this.$store.state.count
//	}
//}
}
<script/>

注意:如果使用computed的方法检测vuex中state的变化,必须将data中返回的count值给去掉,因为computed对象中的属性,只能是新添加的,不能是已经存在的属性

改变vuex中state的count还有另外一种方式
比如

this.$store.state.count++
this.$store.state.count--

但是vue不推荐这样使用,因为无法追踪记录每一次数据改变的经过,如果出现数据错误将会很难更改

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

可缺不可滥

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值