1.引入vuex和vue建立新问价store.js
import Vue from "vue";
import Vuex from 'vuex';
import axios from 'axios'
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
data: {
num: 100
},
Loding: false,
},
getters: {
dbclick(state){
return state.data.num*2
},
},
mutations: {
dataFn(state, obj) {
state.data= obj;
},
},
actions: {
prodect({commit},payload){
// let url = 'https://api.apiopen.top/getWangYiNews'
console.log("payload",payload)
let url ='http://httpbin.org/get'
return new Promise((resolve,reject)=>{
axios.get(url).then((res)=>{
resolve(res.data)
console.log(res)
commit('action',res.data)
}).catch((err)=>{
console.log("报错")
reject(err)
})
})
}
},
modules: {}
})
export default store
- main.js中全局引入
import store from './store/index.js';
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
3.运用
import {mapState, mapGetters, mapMutations, mapActions} from 'vuex'
// v1.state中数据用mapState取用
computed: {
// 使用对象展开运算符将此对象混入到外部对象中
...mapState(['dataObj']),
},
<h2>{{dataObj.num}}</h2>
// v2.mapGetters取用 在这里直接调用getteres中方法就行
computed: {
...mapState(['dataObj']),
},
<h2>{{dataObj.num}}</h2>
// v3.使用 mapMutations 其实就是存的时候将this.dataFn 映射为this.$store.commit(‘dataFn’)
methods:{
// 以前存数据的写法
example(){
this.$store.commit('dataFn', this.data)
},
// 辅助函数的写法
// <button @click="dataFn(data)">点击触发</button>
...mapMutations(['dataFn']),
}
// v4.mapActions 在组件中使用 this.$store.dispatch('prodect') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用
// 就是在actions里写一个异步请求方法然后派发调用
<button @click="prodect">点击触发</button>
<button @click="request">点击触发</button>
<button @click="request2">点击触发</button>
methods: {
...mapActions(['prodect']),
request(){
this.prodect({name:'张三'}).then((result) => {
//请求发送成功后的回调数据
console.log("result",result)
}).catch((err) => {
})
}
request2(){
this.$store.dispatch('prodect',{name:'张三'}).then((res)=>{
console.log("res",res)
})
}
//以上方法都是可以的，看自己的喜好
},
