actions 所有异步操作只能放在actions 中 Action 可以包含任意异步操作。（为了告诉自己的，怕忘记了）
命名空间 和 命名函数 modules 把 store 模块化 以后会这么做
https://github.com/wangyess/vue-cli-3/tree/master/src/store
首先下载vuex 并且建立一个store 文件夹 在建一个store.js 文件
npm install vuex --save //安装vuex
在store.js 文件中 引入vue vuex 并且让vue使用vuex
import Vue form ' vue ';
import Vuex form ' vuex ';
Vue.use( Vuex );
定义store 并且暴露出去 以供后续 main.js 中引入
const store = new Vuex.Store({
# /* state 管理状态 要用的数据都在这里 */
state:{
count:9
}，
# /** getters 怎么说呢！ 可以对state中的数据进行过滤 或者说是添加一些判断条件啊 比如当 count=0 的时 *候可以让其 显示为空 等等！
*如下面这种 外部想要访问count 就应该是这样的
*this.$store.getters.getcount; */
getters:{
getcount( state ){
return state.count >0 ? state.count : state.count = 0;
}
},
/* mutations 是用来处理数据的 里面定义的都应该是方法 如果外部想要改变数据 只有调方法
通过 this.$store.commit(" addcount "); 不要疑惑为什么方法写成了字符串 语法就是这样
注意 ： 这个这么调方法的前提是 没有加 actions
*/
mutations:{
addcount(state){
state.count++;
}
},
/* 如果增加 actions 那么外部调用就应该先经过actions 在actions 中调用 mutations 中的方法
但是 actions 并不是必须品 所以可以直接在外部调用 mutations 中的方法 ，但是加了actions
那么外部调用的方法就变成 this.$store.dispatch(" actionaddcount "); 之后再actions 中调用
mutations 中的方法 context.commit(" addcount ");
*/
actions:{
actionaddcount(context){
context.commit(" addcount ");
}
}
}
看完上面有可能还没没有太懂 我把方法总结一下 我是以上面为例子
不加 getters 外部对数据的访问方法 === 也就是获取数据
this.$store.state.count;
添加 getters 外部对数据的访问 首先经过getters 在getters 的方法中对想要的数据进行处理 并返回
this.$store.getters.getcount;
不加actions 外部想要改变数据 调用的方法 在mutations 的方法 addcount 中处理数据
this.$store.commit(" addcount ");
添加actions外部想要改变数据 就应该先经过actions 在actions 的方法 actionaddcount 中调用 mutations 中的方法
this.$store.dispatch(" actionaddcount");
actionaddcount 方法中用 context.commit(" addcount "); 调用mutations 中的addcount 方法
覆盖一个我的代码吧 只是方法名有些不一样
import Vuefrom 'vue';
import Vuexfrom 'vuex';
Vue.use(Vuex);
const store= new Vuex.Store({
state:{
count:9；
},
getters:{
gettercount(state){
return state.count>0 ? state.count : state.count=0;
}
},
mutations:{
increment(state){
state.count++;
},
},
actions:{
increment(context){
context.commit("increment");
},
}
})
export default store; // 暴露出去 在main.js 中 挂在到new vue 实例上
在main.js 中先引入 store.js 文件
import store from './store/store';
之后给你放一个截图会更清楚一些
网友评论