安装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不推荐这样使用，因为无法追踪记录每一次数据改变的经过，如果出现数据错误将会很难更改