7-1.Vuex之安装和简单的应用

Vuex

vuex是一个专门为vue.js设计的集中式状态管理架构，其中状态可以理解为在data中的属性需要共享给其他vue组件使用的部分(即是将共用属性进行共享)。
例如当用户登陆成功，得到了用户名和密码，若将用户名和密码等属性做成状态，那么在其他页面可以很方便的得到用户名和密码(等属性)，不用在通过服务器进行查找。
在使用vuex时需要安装相关的依赖包，利用npm包管理工具，安装vuex，采用以下代码。

npm install vuex --save

! ! !注意这里需要加上save,因为这个包是在生产环境中使用的。

Vuex引入步骤

1.安装vuex成功后，需要在src/目录下新建vuex文件夹
2.在src/vuex目录下新建store.js文件
3.在src/vuex/store.js文件中分别引入vue和vuex

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

使用vuex，引入之后用Vue.use进行引用

Vue.use(Vuex);

通过以上三步操作，vuex就算是引入成功了。

Vuex简单的应用

例子：实现点击按钮进行数字加一或是减一的功能。
首先，先定义结果count属性，将该属性做成状态
1.在src/vuex/store.js文件中定义一个常量对象state

const state={
	count:1
}

2.再将该常量对象进行暴露，src/vuex/store.js文件中,用export default 封装代码，让外部可以引用。

export default new Vuex.Store({
	state
})

3.在src/components/目录下新建count.vue模板，在模板中简单的输出count这个状态(属性)。

<template>
	<div>
		<h3>结果是:{{$store.state.count}}</h3>
	</div>
</template>
<script>
	import store from '@/vuex/store';
	export default{
		data(){
			return{
				msg:'结果是:'
			}
		},
		store
	}
</script>
<style>
</style>

• 在新建的模板中(count.vue)中引入store.js文件

import store from '@/vuex/store';

• 将在store.js文件中定义的常量对象state进行引入

<script>
   export default{
   	data(){
   		return{
   			msg:'结果是:'
   		}
   	},
   	store
   }
</script>

• 获取state对象中的属性可以通过调用$store.state.属性代码

	<h3>{{$store.state.count}}</h3>

附加：若想测试此代码，还需要在路由配置文件(src/router/index.js)进行配置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
			path:'/count',
			component:Count
		}
  ]
})

运行的结果:

4.在src/components/count.vue文件中增加两个按钮，点击按钮进行加一或减一的操作。

• 在count.vue文件中：

<template>
   <div>
   	<h3>结果是:{{$store.state.count}}</h3>
   	<p>
   		<button @click="$store.commit('add')">加1</button>
   		<button @click="$store.commit('reduce')">减1</button>
   	</p>
   </div>
</template>

<script>
   import store from '@/vuex/store';
   export default{
   	data(){
   		return{
   			msg:'结果是:'
   		}
   	},
   	store
   }
</script>

• 在store.js文件中中加入两个改变state的方法，这时用到的是mutations(改变)常量。

const mutations={
   add(state){
   	   state.count++;
   	   console.log("运行了add方法")
   },
   reduce(state){
        state.count--;
   	    console.log("运行了reduce方法")
   }
}

这里用到了add和reduce方法，都是将state引入进行操作。写好改变state的方法之后，也需要将其进行暴露。

export default new Vuex.Store({
	state,mutations
})

• 在store.js文件中写好相关的方法之后，调用mutations中的方法可以通过
  $store.commit('方法名')的形式进行调用。

<p>
	<button @click="$store.commit('add')">加1</button>
	<button @click="$store.commit('reduce')">减1</button>
</p>

加一的运行结果：

减一的运行效果：