vuex基本使用

1 、在src目录下建立store文件夹，建立actions.js/getter.js/index.js/mutation.js/mutation_type.js/state.js文件
2、state.js文件内容(生命state中要使用的数据及初始值)

const state = {
		currentIndex: -1,
}
export default state;

3 、 mutation_type.js文件内容（定义类型常量）

export const SET_CURRENTINDEX="SET_CURRENTINDEX";

4、mutation.js文件内容(根据类型不同进行不同的操作)
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

import * as types from "./mutation_type.js"
const mutation = {
	[types.SET_CURRENTINDEX](state,index){
		state.currentIndex=index;
	},
}
export default mutation;

5、index.js(引入vuex各个方法文件)

import Vue from "vue";
import Vuex from 'vuex';
import * as getters from "./getters.js";
import * as actions from "./actions.js";
import state from "./state.js";
import mutations from "./mutation.js";
import createLogger from "vuex/dist/logger";
Vue.use(Vuex);
const debug =process.env.NODE_ENV!=='production';
export default new Vuex.Store({
	getters,
	state,
	actions,
	mutations,
	strict: debug,
  	plugins: debug ? [createLogger()] : []
})

6、getter.js文件内容
Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

export const currentIndex=state=>state.currentIndex;

例如:
export const currentSong=(state)=>{
	return state.playlist[state.currentIndex]||[];
}
currentSong 是根据数组playlist和角标CurrentIndex值实时计算出来的，当数组和角标任何一个发生
变化的时候，自动计算currentSong的值

7、actions.js
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用，context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

export const selectplay = function({commit, state}, {list, index}) {
		commit(types.SET_CURRENTINDEX,index);
};

8、在main.js中引入store，这样每个组件就可以使用了

new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
});

9 组件中使用
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性
mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用（需要先在根节点注入 store）
mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。

	import { mapActions,mapGetters,mapMutations } from 'vuex';
	computed: {
      ...mapGetters(
        [
          'fullScreen'
        ]
      ) 
	},
	methods: {
	  ...mapActions(
	  		[
				'selectplay' //  将 `this.selectplay()` 映射为 `this.$store.dispatch('selectplay')`
			]
		),
	 ...mapMutations({
        setCurrentIndex:"SET_CURRENTINDEX" 
        // 将 `this.setCurrentIndex()` 映射为 `this.$store.commit('SET_CURRENTINDEX')`
      }),
		selectItem(){
		//调用方法
				 this.setCurrentIndex( 9 ),
				this.selectplay({
							index: index
				})
		}
	}