Vuex 组件中的属性对象及项目搭建

Vuex:
1.什么是vuex 是专门为vue.js开发的状态管理模式，他集中存储了所有组件的状态（包括：数据/事件...)
2.他的应用场景：中大型项目中使用
组件式开发 单页面应用

首页/购物车/中餐/我的---》张三（本地存储） /当前位置（公用的）

3.使用
搭建项目
> vue init webpack-simple Demo
> cd demo
> npm install #安装依赖

1.安装vuex
> cd demo
> cnpm install vuex -S 

2.目录结构
webpak.config.json
index.html
src
	main.js
	app.vue
	store(vuex的文件（.js）)
	  state.js===>（state 数据，mutations 事件）


------------------------------------------------------------------
vuex 中的对象 state  mutations 
state.js内容
//vuex文件的内容

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const state = { //存储数据
  count: 1
}
const mutations = { //改变数据状态的  存储事件的
  add (state) {
    state.count++;
  },
  reduce (state) {
    state.count--;
  }
}
export default new Vuex.Store({
  state,
  mutations //挂载到对象中
})

App.vue
文件中调用state数据

*********原始方式：*********
在script标签中 引入store
	import store from './store/state.js'
	export default {//中添加store
	store,
	}
在template 标签组件中添加state数据
	{{$store.state.count}} #标签中调用
	button按钮 点击事件
	<button @click="$store.commit('add')">+</button>
	<button @click="$store.commit('reduce')">-</button>
------------------------------------------------
*********第二种方式：********* 使用vue 的computed 计算属性
在script标签中 引入store
	import store from './store/state.js'
	export default {//中添加store
		store,
		computed:{ //使用vue 中computed属性 计算属性
			return store.state.count;
		}
	}
在template 标签组件中添加state数据
	 {{count}}

------------------------------------------------
		
*********第三种方式：*********	（推荐使用）使用vuex 的mapState属性

在script标签中 引入store
	import store from './store/state.js'
	import {mapState} from 'vuex'
	export default {//中添加store
	store,
	computed:{["count"]} //可以写数组["count"] 也可以写对象 {count:state=>state.count} 用箭头函数
	}
在template 标签组件中添加state数据
	 {{count}}
---------------------------------------------------------------------
mutations 事件
** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'

 Vue.use(Vuex)

 const state = {
  count:1
 }
 const mutations = {
  add(){
   state.count++;
  },
  reduce(){
   state.count--;  
  }
 }
 export default new Vuex.Store({
	state,mutations //挂载常量
 })

** 在App.vue文件中

*********原始方式：********* 利用vuex的store 对象调用对应属性及方法 需要commit 方法进行提交才能生效
 
 template定义组件中使用数据和事件
 {{count}}
 <hr/> 
 <button @click="$store.commit('add')">+</button>
 <button @click="$store.commit('reduce')">-</button>

 在script中引入
 import store from './store/state'
 import {mapState} from 'vuex'

 export default {
   store,
   mutations,
   computed:mapState(["count"])
 }
 
*********第二种方式：********* 利用vuex 中的mapMutations 对象进行调用方法内部实现方法的提交生效
template定义组件中使用数据和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>

在script中引入
 import store from './store/state'
 import {mapState,mapMutations} from 'vuex'

 export default {
   store,
   mutations,
   computed:mapState(["count"]),
   methods:mapMutations(["add","reduce"])
 }

---------------------------------------------------------------------
vuex 中的对象 getters 
getters===>相当于vue 中的computed 计算属性 ，有过滤的效果

** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex)

 const state = {
  count : 1
 }
 const mutations = {
  add(state){
    state.count++; 
  },
  reduce(state){
   state.count--;
  }
 }
 const getters = {
  count(state){
   return state.count += 10; 
  } 
 }
 export default new Vuex.Store({
	state,
	mutations,
	getters
 })
** 在App.vue文件中
 template定义组件中使用数据和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>

 在script中引入
 import store from './store/state.js'
 import {mapState,mapMutations} from 'vuex'

 export default {
  store,
  computed:{
  //第一种方式原始getters写法 属性 进行过滤
    count: function (store) {
      return this.$store.getters.count
    },
    //第二种getters写法 用es6语法 第一步引入mapGetters 模块
    ...mapState(["count"]),//es6 写法
    ...mapGetters(["count"])
  },
  methods: mapMutations(["add", "reduce"])
 }

 ------------------------------------------------------------------
vuex 中的对象 actions
Actions类似于mutations ,不同在于
 action提交的是mutations,而不是提交状态
 action可以包含任意异步操作。
** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex);

 const state = {
  count:1
 }
 const mutations= {
  add(state){ state.count++},
  reduce(state){state.count--}
 }
 const actions = {
  add({commit}){ commit("add")},
  reduce({commit}){ commit.("reduce")},
  odd({commit}){if(state.count%2 == 0){ commit("add")}},
  ay({commit}){setTimeout(()=>{commit("reduce")},1000);}
 }
 export default new Vuex.Store({
  state,mutations,actions
 
 })
** 在App.vue文件中
template定义组件中使用数据和事件
 {{count}}
 <hr/> 
 <button @click="add">+</button>
 <button @click="reduce">-</button>
 <button @click="odd">偶数</button>
 <button @click="ay">异步</button>
 在script中引入
 import store from './store/state.js'
 import {mapState,mapActions} from 'vuex'

 export default {
  store,
  computed:{
    ...mapState(["count"])//es6 写法
  },
  methods: mapActions(["add", "reduce","odd","ay"])
 }

----------------------------------------------------------
vuex 中的对象 modules 模块

** 在state.js 中
 import Vue from 'vue'
 import Vuex from 'vuex'
 Vue.use(Vuex);

 const state = {
  count:1
 }
 const mutations= {
  add(state){ state.count++},
  reduce(state){state.count--}
 }
 const actions = {
  add({commit}){ commit("add")},
  reduce({commit}){ commit.("reduce")},
  odd({commit}){if(state.count%2 == 0){ commit("add")}},
  ay({commit}){setTimeout(()=>{commit("reduce")},1000);}
 }
 const module = {
  state,mutations,actions
 }
 export default new Vuex.Store({
  modules:{
   a:module
  }
 
 })

** 在App.vue文件中
template定义组件中使用数据和事件
 {{count}}

 在script中引入
 import store from './store/state.js'
 import {mapState,mapActions} from 'vuex'

 export default {
  store,
  computed:{
   count(){
    return this.$store.state.a.count
   }
  },
  methods: mapActions(["add", "reduce","odd","ay"])
 }



 ----------------------------------------
 vuex_的项目结构

 把state.js 拆分开用
 
 index
 src
	app.vue
	main.js
	store 
		index.js===>入口
		mutations.js===>事件/数据
		action.js===>提交事件
		types.js ===>事件名称，定义为常量
		getters ===>computed 计算属性/过滤 返回数据


创建store文件夹
  1.在store目录下创建index.js===》入口
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)

  import actions from "./actions"
  import mutations from "./mutations"
  export default new Vuex.Store({
	modules:{
	 mutations
	},
	actions
  })

  2.在store目录下创建mutations.js===》存放数据和事件
  import getters from "./getters"
  const state = { count : 10}

  const mutations = { }
  export default{
   state,getters
	
  }
  3.在store目录下创建getters.js ===》相当于计算属性 返回属性的
  exprot default {
	count(state){return state.count}
  }
 4.在src根目录下找到
   ** 在main.js 中引入 store 数据和事件
   import store from './store/' //默认就是index.js
   new Vue{
	store,//挂载到Vue对象中
   }

   ** 在App.vue 组件中添加被展示的数据
   template标签中添加
   {{count}}
   script里面引入 vuex 按需引入对象
   import{mapGetters} from "vuex"

   exprot default{computed: mapGetters(["count"]),}
    
	运行项目可以看到 count属性值==》数据添加完成
 5.添加事件
  在store目录下创建types.js====》事件名称，定义为常量
  export const ADD = "ADD";
  export const REDUCE ="REDUCE"

  在store目录下找到mutations.js编辑事件
  引入types
  import { ADD, REDUCE } from './types' //按需引入
   const mutations = { [ADD](state){state.count++},[REDUCE](state){state.count--} }
  export default{
    mutations //挂载
	
  }

  在store目录下创建actions.js===>提交事件
  import * as types from "./types"
  export default{
	add({commit}){commit(types.ADD)},
	reduce({commit}){commit(types.REDUCE)}
  }

  在store目录下找到index.js 引入action 
  import actions from "./actions"
  export default new Vuex.Store({
	actions
  })

  在App.vue文件中添加点击事件触发
  template标签下
  <button @click="add">+</button>
  <button @click="reduce">-</button>

  scripte内
  使用vue 的mapActions
  import {mapGetters,mapActions} from "vuex"

  export default {
   computed:mapGetters(["count"])
   methods:mapActions(["add","reduce"])
  }

  实现事件功能