vuex的使用

vuex是vue用来管理组件状态的插件

在一个项目目录的终端输入
npm add vuex // 将vuex插件安装到当前的vue项目

main.js

import Vuex from 'vuex'; // 加载vuex
Vue.use(Vuex); // 将Vuex挂载到Vue项目中
const store = new Vuex.Store({ // vuex实例化
	state:{
	  // 一般写一些属性
	},
	getters:{
		// 也是设置值的区域 必须通过return来返回值
	},
	mutations:{
      // 方法 这里写方法会有一个默认的参数 state 这个state代表的是上面的state对象
	},
	actions:{
	  // 负责处理一些复杂的运算 也有一个默认的参数 context 其中用上面getters和muations中的属性
	}
})
new Vue({
 ...
 store //将vuex的实例挂载到当前组件中
})

app.vue

 import {mapState,mapMutations,mapActions} from 'vuex'; // 导入vuex中一些模块
 export default {
	computed:{  // 利用解构来实现赋值
		...state([]),
		...getters([])
	},		
	methods:{
		...mapMutation([]),
		...mapActions([])
	}
 }

假如编写项目时可以能有很多组件要进行管理不可能把所有的管理都写到一起
这里我们在vue-cli的目录中新建一个store目录创建一个index.js
针对不同的组件创建不同的管理文件

store目录下的index.js

import Vue from 'vue';
import Vuex from 'vuex'; // 加载vuex
import a from 'a';
import b from 'b';
Vue.use(Vuex); // 将Vuex挂载到Vue项目中
const store = new Vuex.Store({ // vuex实例化
	modules{a,b} // 将内容管理委托到这里
})
export default store // 将store暴露出去

store目录下的a.js(设置对a.vue的管理)

import Vue from 'vue';
import Vuex from 'vuex'; // 加载vuex
Vue.use(Vuex); // 将Vuex挂载到Vue项目中
const store = ({ // vuex实例化
	state:{
	  // 一般写一些属性
	},
	getters:{

	},
	mutations:{
      // 方法 这里写方法会有一个默认的参数 state 这个state代表的是上面的state对象
	},
	actions:{
	  // 负责处理一些复杂的运算 也有一个默认的参数 context 其中用上面getters和muations中的属性
	}
})
export default store // 将store暴露出去

store目录下的b.js(设置对b.vue的管理)

import Vue from 'vue';
import Vuex from 'vuex'; // 加载vuex
Vue.use(Vuex); // 将Vuex挂载到Vue项目中
const store = ({ // vuex实例化
	state:{
	  // 一般写一些属性
	},
	getters:{

	},
	mutations:{
      // 方法 这里写方法会有一个默认的参数 state 这个state代表的是上面的state对象
	},
	actions:{
	  // 负责处理一些复杂的运算 也有一个默认的参数 context 其中用上面getters和muations中的属性
	}
})
export default store // 将store暴露出去

对store进行模块化管理

store/index.js

import Vuex from 'vuex';
import Vue from 'vue'
import money from './a'
import count from './b'
Vue.use(Vuex)
const Store = new Vuex.Store({
  modules:{
    money,
    count
  }
});
export default Store

store/a.js

export default {
  namespaced:true, // 开启命名空间
  state:{
    money:1
  },
  getters:{

  },
  mutations:{
    add(state){
      state.money++
    },
    reduce(state){
      state.money--
    }
  },
  actions:{
    add:(content) => {
      content.commit('add')
    },
    reduce:({commit}) => {
      commit('reduce')
    }
  }
}

store/b.js

export default {
  namespaced:true,
  state:{
    count:1
  },
  getters:{

  },
  mutations:{
    add(state){
      state.count++
    },
    reduce(state){
      state.count--
    }
  },
  actions:{
    add:(content) => {
      content.commit('add')
    },
    reduce:({commit}) => {
      commit('reduce')
    }
  }
}

总结：哪一个vue组件要使用vuex才要引用vuex ，在store/index.js中也要引用vuex，注意记得在App.vue中的vue实列中挂载store实例，只用引用了vuex的组件才可以被管理