vuex的使用
在vue中进行兄弟组件之间的通讯的时候我们会用到eventbus和vuex这两种方式,当然并不是这两种方式仅仅局限于兄弟组件通讯,当项目较大时候,我们通常会用到vuex
1.创建vuex实例
vuex项目初始化后,src目录会多一个store/index.js,里面会进行vuex的初始化,vuex的组成如下:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
//vuex中数据存储
state: {
userinfo: 'defaultValue'
},
//修改数据
mutations: {
changeUserinfo(state, payload) {
state.userinfo = payload
// console.log(state);
}
},
//异步操作
actions: {
//异步改变state数据
asyncChange(xxx, payload) {
let user = '张三'
setTimeout(() => {
user = payload
xxx.commit('changeUserinfo', user)
}, 1000)
}
},
//计算属性
getters:{
userChangeNum(state){
return state.userinfo+'改变了'
}
},
modules: {
}
})
main.js中引入store
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Mock from '@/mock'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import XLSX from 'xlsx'
Vue.config.productionTip = false
Vue.use(XLSX)
Vue.use(ElementUI);
Vue.filter("filterAdd1", function (value, one, two) {
return value + one + two; //默认第一个参数就是默认要过滤的那个值
});
Vue.filter("filterAdd2", function (value) {
return "$" + value;
});
new Vue({
router,
store,
Mock,
render: h => h(App)
}).$mount('#app')
引入以后我们就可以访问store中state中的数据
getstate() {
console.log(this.$store.state.userinfo);
},
state中数据的修改尽量不要用this.$store.state来修改,而应该调用mutations方法来修改,而mutations中的方法用commit来调用
changeStateByMutations() {
this.$store.commit("changeUserinfo", "son1changeval");
console.log(this.$store.state.userinfo);
},
在vue组件中的方法里调用vuex中的方法来改变state中的值如上面代码所示,但是mutations中只能是同步操作,异步操作的代码要放在actions中来完成,但是如果仍然要修改state中的值,就还是要调取mutations中的方法,actions的方法调用用dispatch来调用,第一个参数为方法名,第二个参数为传递的值
this.$store.dispatch("asyncChange", "李四");
getters为vuex中的计算属性和computed类似,getters中的值获取和state中的值获取方式类似
this.$store.getters.userChangeNum
vuex借助于辅助函数的操作方法
这是为了方便在组件中的使用,借助于辅助函数来处理vuex中的数据,首先先引入到组件中
import {mapState,mapMutations,mapGetters,mapActions} from 'vuex';
state和getters的处理放在计算属性中,mutations和actions的处理放到methods中去
computed: { ...mapState(["userinfo"]), ...mapGetters(["userChangeNum"]) },
methods: {
...mapMutations(["changeUserinfo"]),
...mapActions(["asyncChange"]),
}
如此一来再获取state和getters中的数据或者调用mutations和actions中的方法时就方便多了,直接用this点出来就可以了
getstateByThis() {
console.log(this.userinfo);
},
getGettersByThis() {
console.log(this.userChangeNum);
this.changeUserinfo("this点change");
},
值得注意的是调用actions和mutations中的方法就不用
this.$store.commit("changeUserinfo", "son1changeval");
this.$store.dispatch("asyncChange", "李四");
而是
this.changeUserinfo("son1changeval")
this.asyncChange("李四")
另外,我们在项目中也可能会因项目多人协作开发,且模块较多而用到vuex中的moudles将vuex分为不同的各个模块,此时各个模块之间都有各自独立的state,actions,mutations,getters,此时在各个模块声明时候有个属性叫namespaced(命名空间)此属性若为true,则各个模块相互独立,各自的模块的数据可以同名,访问时需要加上模块名前缀比如下面的代码
...mapActions([
"moduleA/sampleFn" // -> this['moduleA/sampleFn']()
]),
this.$store.dispatch("moduleA/sampleFn"); // 直接从store中dispatch
若namespaced设置为false,则表示各模块均为全局注册,用法和不分模块时调用方法一致