vuex入门
vuex是个集中式管理数据,在大型的单页网页上用比较好,在小项目上就有点累赘
我用vue-cli建了个脚手架（需要先配置好vue）
vue init webpack-simple vuex-demo
根据vuex官方文档，下载vuex
npm i vuex -D
准备好后，我们需要在src文件夹下建一个store文件夹来专门存放于vuex相关的文件
——》
接下来新建5个js文件（注意：官方说3个，但是5个会分得更细，更好维护），分别如下
根据官方文档，个人理解这几个js文件分别的作用是
1.actions.js //这个文件是给methods:mapActions提供可调用方法的方法名,真正的运算在mutations里
2.getters.js //这个文件是给mutations数据用的方法
3.index.js //这个文件是汇总store文件夹下的所有文件的.
4.mutations.js //这个文件是给action提供可调用方法的,并且提交所有方法与数据到index.js
5.type.js //这里是给actions.js提供方法名
我做了一个小小的demo，效果如下图
功能:
从左往右分别是
按钮1:点击增加1
按钮2:点击减少2
按钮3:当为偶数时,才能点击,并增加1
按钮4:点击后隔1秒后才加1
按钮5:点击加2
代码如下:
App.vue文件
1 <template> 2 <div id="app"> 3 <h3>welcome vuex</h3> 4 <button @click="increment">增加</button> 5 <button @click="decrement">减少</button> 6 <button @click="clickOdd">偶数才能点击</button> 7 <button @click="clickAsync">点击异步</button> 8 <button @click="addtwo">点击加2</button> 9 <div> 10 现在的数字为:{{count}} 它是{{getOdd}} 11 </div> 12 </div> 13 </template> 14 15 <script> 16 import {mapGetters,mapActions} from 'vuex' //从vuex mapGetters,mapActions两兄弟
17
18 export default {
19 computed:mapGetters([ //计算时,获取用了getters里的规则配置的motations那边里的count
20 'count',
21 'getOdd'
22 ]),
23 methods:mapActions([ //获取方法名
24 'increment',
25 'decrement',
26 'clickOdd',
27 'clickAsync',
28 'addtwo'
29 ])
30 }
31 </script>
main.js文件
1 import Vue from 'vue' 2 import App from './App.vue' 3 import store from './store/' //引入store文件 4 5 new Vue({ 6 el: '#app', 7 store, 8 render: h => h(App) 9 });
actions.js文件
1 //这个文件是给methods:mapActions提供可调用方法的方法名,真正的运算在mutations里 2 3 4 import * as types from './types.js' 5 //作为一个命名空间,可以用types.xxx的方式使用types里的内容 6 export default { 7 increment:({commit})=>{ //处理你要干什么,如异步请求,判断,流程控制,commit是个对象 8 commit(types.INCREMENT); //提交方法名 9 }, 10 decrement:({commit})=>{ 11 commit(types.DECREMENT) 12 }, 13 addtwo:({commit})=>{ 14 commit(types.ADDTWO) 15 }, 16 //偶数才能点 17 clickOdd:({ 18 commit, //给mapActions提交的 19 state //状态数据 20 })=>{ 21 22 if(state.mutations.count%2===0){ 23 commit(types.INCREMENT); 24 } 25 }, 26 27 //点击异步 28 clickAsync:({commit})=>{ 29 new Promise((resolve)=>{ 30 setTimeout(function(){ 31 commit(types.INCREMENT); 32 resolve(); 33 },1000) 34 }) 35 } 36 }
getters.js文件
1 //这个文件是给mutations数据用的方法 2 3 export default { 4 count:(state)=>{ 5 return state.count 6 }, 7 getOdd:(state)=>{ 8 return state.count%2===0?'偶数':'奇数' 9 } 10 }
index.js文件
1 //这个文件是汇总所有store下的文件的. 2 3 import Vue from 'vue' 4 import Vuex from 'vuex' 5 6 Vue.use(Vuex); 7 8 import actions from './actions.js'; 9 import mutations from './mutations.js' 10 11 export default new Vuex.Store({ 12 modules:{ 13 mutations 14 }, 15 actions 16 });
mutations.js文件
1 //这个文件是给action提供可调用方法的,并且提交所有方法与数据到index.js 2 3 import {INCREMENT,DECREMENT,ADDTWO}from './types.js' 4 import getters from './getters.js' //调用getters那边的方法 5 6 7 const state={ 8 count:10 9 }; 10 11 const mutations={ 12 [INCREMENT](state){ //处理状态(数据)变化 加1 13 state.count++; 14 }, 15 [DECREMENT](state){ //处理状态(数据)变化 减1 16 state.count--; 17 }, 18 [ADDTWO](state){ //处理状态(数据)变化 加2 19 state.count+=2; 20 } 21 22 }; 23 24 export default{ //导出相关组件 25 state, 26 mutations, 27 getters 28 }
type.js文件
1 //这里是给actions.js提供方法名 2 3 export const INCREMENT='INCREMENT'; 4 export const DECREMENT='DECREMENT'; 5 export const ADDTWO='ADDTWO';
说到底，最重要的还是
mapGetters, mapActions 这两兄弟
弄完如果老是报错说哪个方法找不到是unkown Type ,重新run dev一下就行了
