VueX--VUE核心插件 VueX--VUE核心插件

使用VueX方法 1.安装vuex模块 npm install vuex --save
2.作为插件使用 Vue.use(Vuex)
3.定义容器 new Vuex.Store({
这里面放定义状态代码
})
4.注入根实例

文章图片
vuex代码，一般放在src/store/index.js文件中
如何在vuex中定义状态数据？

例：
let store = new Vuex.Store({ //创建Vuex实例
//这里定义状态数据
state: {
count: 100
}
});

vuex核心概念 store：类似容器，包含应用的大部分状态；
注意：
* 一个页面只能有一个store
* 状态存储是响应式的
* 不能直接改变store中的状态，唯一途径显示地提交mutations
State：包含所有应用级别状态的对象
Getters：在组件内部获取store中状态的函数
Mutations：唯一修改状态的事件回调函数
Actions：包含异步操作、提交mutation改变状态
Modules：将store分割成不同的模块
如何获取定义的状态数据？ 在需要获取数据的单页面文件组件中，使用以下方法：

文章图片
如何改变vuex容器中（store）如的值？ 方法1.改变非异步(不通过ajax)的值使用mutations属性,处理同步数据修改
例:
vuex对象中写：

文章图片
【VueX--VUE核心插件】在单页面文件组件中调用

文章图片
注意：
mutations不能直接调用；
调用方法：

$store.commit("写mutations中的回调函数名");
这个方法，一个参数的时候，是直接调用mutations函数。
第二个参数，代表传入mutations函数的参数。
第二个参数，可以是1个，多个的时候，传一个对象；

如:

$store.commit("写mutations中的回调函数名",{n:2});
这样在mutations:中就可以接收了
commit的对象形式写法
$store.commit({
type:'写mutations中的回调函数名',
de:10 //这个就是第二个参数，key名随便起
})

方法2.改变异步(ajax获取)的值使用actions：处理异步数据修改

//要先写好mutations的方法
mutations:{
addIncrement(state){
state.count +=1;
}
},
/*
当遇到数据是通过ajax异步请求过来的，这时数据会有延迟
这种时候，就需要使用actions来提交mutations中的回调函数
*/
actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
addAction(context){
setTimeout(()=>{
//通过context对象，可以使用commit方法，参数输入mutations中的函数名
context.commit('addIncrement');
},1000);
}
}

调用actions中的函数，方法如下
dispatch传参的格式方法，与this.$store.commit()一模一样
this.$store.dispatch('addAction');
actions中的函数可以相互调用传值；
例：

actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
addAction(context){
setTimeout(()=>{
//通过context对象，可以使用commit方法，参数输入mutations中的函数名
context.commit('addIncrement');
//这里调用了下面的函数
context.dispatch('testAction',{test:'测试'});
},1000);
},
testAction(context,obj){//传值正常传
//可以打印出'测试的数据'
console.log(obj.test);
}
}

这里说明一下actions传值的另一种方法

actions:{
//函数名随便写，参数是一个对象，和store对象的方法属性都一样的对象；
/*
这个context参数，可以使用es6的结构赋值方法写
直接传一个对象形式{commit,dispatch} 把需要的方法直接写到里面，不用传context去调用对应的方法
这样写更方便。
es6的结构赋值：把一个对象里面的属性，直接放到对象中；
*/
addAction({commit,dispatch}){
setTimeout(()=>{
//通过context对象，可以使用commit方法，参数输入mutations中的函数名
commit('addIncrement');
dispatch('testAction',{test:'测试'});
},1000);
},
testAction(context,obj){
console.log(obj.test);
}
}

getter计算状态 作用：关于状态数据中，一些对数据的处理(判断/过滤)等，都在getter属性中处理。
写法：在vuex对象中写

getters:{
filterCount(state){//state就是状态对象
//在这里做count的判断
return state.count >= 120 ? 120 : state.count;
}
}

调用方法：

computed:{//在计算属性中取vuex定义的状态数据
//getter的调用方法，就是在计算属性中，另定义一个函数，在这个函数中调用getter中判断过的值
num2(){
//$store中有getters属性，可以获取getter中的filterCount的值
return this.$store.getters.filterCount;
}
}

HTML显示方法：

文章图片
Vuex辅助函数 mapState：
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性。
mapGetters：
辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
mapMutations：
将 store 中的 mutations 映射到局部计算属性。
mapActions：
将 store 中的 actions 映射到局部计算属性。