vuex 的基本使用
第一步安装vuex
1 npm i vuex -S
在src文件夹下面创建store文件夹，里面创建index.js，写下如下代码：
1 mport Vue from 'vue' 2 import Vuex from 'vuex' 3 4 Vue.use(Vuex) 5 6 export default new Vuex.Store({ 7 state: { 8 }, 9 getters: { 10 }, 11 mutations: { 12 }, 13 actions: { 14 }, 15 modules: { 16 } 17 })
接下来在main.js 文件中引入 /store/index.js
1 import Vue from 'vue' 2 import App from './App.vue' 3 import router from './router' 4 import store from './store' 5 6 Vue.config.productionTip = false 7 8 new Vue({ 9 router, 10 store, 11 render: function (h) { return h(App) } 12 }).$mount('#app')
在state属性里面添加数据
1 state: { 2 num:1, 3 url:"//www.cnblogs.com/" 4},
单页中调取state里面的数据
1 <div> 2 num:<span>{{$store.state.num}}</span> 3 </div> 4 <div> 5 url:<span>{{$store.state.url}}</span> 6 </div>
此外，还可以使用辅助函数 …mapState
1 import { mapState } from 'vuex'; 2 export default { 3 name: 'HomeView', 4 computed:{ 5 ...mapState([ 6 'num', 7 'url' 8 ]), 9 ...mapState({ 10 number:'num', 11 local:'url' 12 }) 13 } 14 }
1 <div> 2 num:<span>{{num}}</span> 3 url:<span>{{url}}</span> 4 </div> 5 <div> 6 num:<span>{{number}}</span> 7 url:<span>{{local}}</span> 8 </div>
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
mutation必须是同步函数
1 mutations: { 2 increment(state){ 3 state.num++ 4 }, 5 incrementBy(state,num){ 6 state.num = num.num 7 } 8 },
mutations里面的方法第一个参数是state对象，第二个参数是载荷（载荷可以是对象，包含的字段更多）。
1 addNum(){ 2 this.$store.commit('increment') 3 }, 4 setNum(){ 5 this.$store.commit('incrementBy',{num:this.figure}) 6 }
触发addNum方法时，num的值会自增长
触发setNum方法时，num的值会变成 figure
mutations第二种提交方式
1 setNum(){ 2 this.$store.commit({ 3 type:'incrementBy', 4 num:this.fugure 5 }) 6 }
type属性是 mutations中的方法名称
这种提交方式将整个对象都作为载荷传给 mutations中的函数
在vue组件中也可以使用 …mapMutations 辅助函数
1 import { mapMutations, mapState } from 'vuex';
1 methods:{ 2 ...mapMutations([ 3 'increment', 4 'incrementBy' 5 ]), 6 addNum(){ 7 this.increment() 8 }, 9 setNum(){ 10 this.incrementBy({num:this.fugure}) 11 } 12 }
tip：在vue2中 this.$store.state.num++ 也可以改变num （不推荐使用嗷）
getter可以认为是 store 的计算属性
第一个参数 state对象
第二个参数 getter对象
1 state: { 2 todos:[ 3 {id:1,name:'张三'}, 4 {id:2,name:'李四'}, 5 {id:3,name:'王五'} 6 ] 7 },
1 getters: { 2 todos(state){ 3 return state.todos 4 }, 5 todoCount(state,getters){ 6 return getters.todos.length 7 }, 8 getTodoById:(state)=>(id)=>{ 9 return state.todos.find(todo=>todo.id==id) 10 } 11 },
…mapGetter 辅助函数
1 import { mapGetters, mapMutations, mapState } from 'vuex';
1 computed:{ 2 ...mapState([ 3 'num', 4 'url' 5 ]), 6 ...mapState({ 7 number:'num', 8 local:'url' 9 }), 10 ...mapGetters([ 11 'todos', 12 'todoCount', 13 'todoById' 14 ]) 15 },
1 getTodo(){ 2 console.log(this.todos); 3 }, 4 getTodoCount(){ 5 console.log(this.todoCount); 6 }, 7 getTodoById(){ 8 console.log(this.todoById(2)); 9 }
Action 类似于mutation， 不同在于：
Action提交的是mutation，而不是直接更改state
Action可以包含异步操作
1 export default new Vuex.Store({ 2 state: { 3 num:1, 4 url:"//www.cnblogs.com/", 5 todos:[ 6 {id:1,name:'张三'}, 7 {id:2,name:'李四'}, 8 {id:3,name:'王五'} 9 ] 10 }, 11 getters: { 12 todos(state){ 13 return state.todos 14 }, 15 todoCount(state,getters){ 16 return getters.todos.length 17 }, 18 todoById:(state)=>(id)=>{ 19 return state.todos.find(todo=>todo.id==id) 20 } 21 }, 22 mutations: { 23 increment(state){ 24 state.num++ 25 }, 26 incrementBy(state,num){ 27 state.num = num.num 28 } 29 }, 30 actions: { 31 increment(context){ 32 context.commit('increment') 33 } 34 } 35 })
也可以写成这样：
1 actions: { 2 increment({commit}){ 3 commit('increment') 4 } 5 },
在组件中调用：
1 this.$store.dispatch('increment')
Actions 支持同样的载荷方式和对象方式：
带有载荷的方法
1 actions: { 2 incrementBy({commit},num){ 3 commit('incrementBy',num.num) 4 } 5 },
组件中调用
1 this.$store.dispatch('incrementBy',{ 2 num:this.figure 3 })
或者：
1 this.$store.dispatch({ 2 type:'incrementBy', 3 num:this.figure 4 })
组件中使用 …mapActions 辅助函数
1 ...mapActions({ 2 increase:'increment', 3 increaseBy:'incrementBy' 4 }), 5 addNum(){ 6 this.increase() 7 }, 8 setNum(){ 9 this.increaseBy() 10 },
