vuex 的学习

1、下载 vuex

npm install vuex --save

 2、接入 vuex 

import Vue from 'vue'
import App from './App.vue'

import Vuex from 'vuex'

3、建一个 store.js 文件，

开始写 vuex，用到 vuex 的组件都要引入  import store from '....store.js'

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

Vue.use(Vuex);
const stase......
export default new Vuex.Store({ //实例化
	state : state,
	mutations : mutations,
	getters : getters,
	actions : actions,
})

4、state

state是存数据的地方，

const state = {
	count : 0,
	todos: [
      { id: 1, text: '111', done: true },
      { id: 3, text: '333', done: true },
      { id: 2, text: '222', done: false }
    ]
}

组件里的调用是

<template>
    <div id="app">
	{{count}}
    </div>
</template>

import store from './vuex/store'
export default {
    name: 'app',
    data () {
        return {
            
        }
    },
    methods:{
        
    },
    computed: {
        count () {
            return store.state.count   // return 回来可直接用
        },
    },
    created(){

    },
    mounted:function(){
        console.log(store.state.count)//也可以直接拿
    },
    components : {
        
    },
    store : store
}

5、mutations

mutations 里面是改变 state 里的参数或者状态的方法，如：

const state = {
	count : 0,
}
const mutations = {
	countAdd (state){
		state.count ++ 
	},
	countReduce (state){
		state.count -- 
	},
	countZero (state,n){ //可传 参数 或者 多个参数的对象 
		var n = n || 0;
		state.count =  n ; 
	},
}
export default new Vuex.Store({
	state : state,
	mutations : mutations,
})

调用mutations里面的方法用 store.commit('countReduce')

<template>
	<div>
		<button @click="countReduce">-1</button>
		<button @click="countAdd">+1</button>
		<button @click="countZero">回零</button>
	</div>
</template>
<script>
import store from '../../vuex/store'
export default{
	data(){
		return {

		}
	},
	methods:{
		countReduce(){
			store.commit('countReduce');//减1
		},
		countAdd(){
			store.commit('countAdd') //加1
		},
		countZero(){
			store.commit('countZero',10)//可传参数
		}
	},

}
</script>

6、getters 计算过滤操作

调用 方法用 store.getters.getTodosId

const state = {
	count : 0,
	todos: [
      { id: 1, text: '111', done: true },
      { id: 3, text: '333', done: true },
      { id: 2, text: '222', done: false }
    ]
}

const getters =  {
    doneTodos  : state => {  //将筛选对象 todos 的 ID ==1 的数据暴露回去，调用方法 store.getters.doneTodos
        return state.todos.filter(todo => todo.id==1)
    },
    getTodosId : (state)=>(id)=>{ //页面传参传入ID 作为筛选条件,可传多个
    	return state.todos.filter(data=>data.id == id) 
    },
    doneTodosCount: (state, getters) => { //可以传第二个参数他的父级 getters，其它的不能传
    	return getters.doneTodos.length
  },
  doneTodosCountID : (state,getters)=>{
  	return getters.getTodosId(3);//调用 getters 里的 getTodosId 要给方法传入 getters
  }
}

页面调用 

	methods:{
		getters(){
			console.log(JSON.stringify(store.getters.doneTodos))
		},
		doneTodos(){
			console.log(JSON.stringify(store.getters.doneTodosCountID ))
			//或者 
			console.log(JSON.stringify(store.getters.getTodosId(3)))
		}
	},

7、actions

actions 可以异步修改状态

const actions = {
    increment ({ commit }) {
      	commit('countZero')
    },
    actionA({commit}){
    	return new Promise((resolve,reject)=>{
    		setTimeout(() => {
		        commit('countZero')
		        resolve()
		    }, 1000)
    	})
    },
    actionB({dispatch,commit}){ //调用同级的 actionA 方法，要 {} 里传进 dispatch
    	return dispatch('actionA').then(()=>{
    		console.log('我是 actions 方法里的 actionB');
    	})
    },
}

页面调用 store.dispatch('xxx')

	methods : {
		ActionClick(){
			store.dispatch('actionA').then(()=>{
				console.log("sdfsdf")
			})
		},
		ActionBClick(){
			store.dispatch('actionB')
		}
	},

8、modules

modules 可以把 Store分成模块化一样管理

export default new Vuex.Store({
	modules: {
		a:{	state : state,			// 可以把它们分类，分类之后获取 state 数据要在 state 后面加个名字，如： store.state.a.count
			mutations : mutations,  // 但是 ： 像 mutations getters actions里的方法都还是 全局的、全局的、全局的、全局的、全局的，可以共用，互相调，还是原来一样调用，不用加名字 a
			getters : getters,
			actions : actions,
		},
		b:{	state : state,
			mutations : mutations,
			getters : getters,
			actions : actions,
		}
	}
})*/

页面调用 state 里的参数 ，要加上是哪个模块的，如：

store.state.a.count

store.state.b.count

但是： 像 mutations、getters、actions 里的方法都是合并在一起的，可以相互调用，页面上不加模块怎么调用（上面介绍），现在就怎么调用 ，，详细找 

http://blog.csdn.net/rvrnld5t/article/details/55254795