mixins和vuex区别
作者：互联网
vuex (一个组件修改了state的数据、其他组件获取到的值是同步更新修改后的值、有的时候数据更新了页面没有更新可以通过this.$forceUpdate强制刷新)
# 优点：
js 原生的数据对象写法, 比起 localStorage 不需要做转换, 使用方便
属于 vue 生态一环, 能够触发响应式的渲染页面更新 (localStorage 就不会)
限定了一种可预测的方式改变数据, 避免大项目中, 数据不小心的污染
# 缺点：
刷新浏览器，vuex中的state会重新变为初始状态
解决方案-插件 vuex-persistedstate
安装：npm i vuex -S
src下新建store文件夹index.js文件、或者直接vue ui方式创建项目时添加vuex
1.store文件夹下index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//然后在main.js引入并挂载
export default new Vuex.Store({
/1. state存放公共数据
state: { name: '张三',age: 18 },
/2. getters相当于 vue中的computed属性，方法第一个参数是state、返回将state中数据计算的值
getters: { val(state) { return state.name + '-' + state.age } },
/3. mutations相当于 vue中的methods、只不过是写一些同步的逻辑代码修改state中的数据、其中写的方法第一个参数为state,第二个参数是携带的参数、在页面中通过this.$store.commit('addnum', { number: 5 })调用 addnum()方法
mutations: { addnum(state, num) { state.age + num.number } },
/4. actions类似于mutations、里面写异步逻辑代码，actions一般操作mutations、而不直接操作satate中的数据
//getUserInfo()为异步的请求方法，返回一个对象，然后在组件methods中通过 this.$store.dispatch('getUserInfo')调用这个方法
actions: {
async getUserInfo(context) {
//context相当于整个$Store对象、类似this.$store、包含state、getters、mutations、actions
var res = await axios.get('url')
//下面相当于this.$store.commit、第一个参数是mutations中的方法名、第二个参数是要传入的数据
context.commit('setUserInfo', res)
//下面调用 actions自己的 getToken()方法
context.dispatch('getToken')
}
}
});
2.main.js全局引入vuex并挂载
//引入vuex
import store from '@/store/index'
new Vue({
//全局挂载vuex
store,
render: h => h(App),
}).$mount('#app')
3.所有组件都能直接使用vuex中的值、例如：App.vue
<template>
<div>
{{name}}
{{age}}
<div @click='addAge'></div>
</div>
</template>
<script>
//通过 mapState辅助函数简化 computed中的代码
import { mapState } from 'vuex'
//引入 mapGetesers辅助函数
import { mapGetters } from 'vuex'
//引入 mapMutations辅助函数 简化methods中的代码
import { mapMutations } from 'vuex'
//引入 mapAcsions辅助函数 简化methods中的代码
import { mapActions } from 'vuex'
export default {
computed: {
//computed 监听获取到 state中公共的值
...mapState(['name', 'age'])，
//computed 监听获取到 getters中计算的得到的值
...mapGetters('[val]')
},
methods() {
//通过 mapMutations辅助函数简化 页面调用的addAge()方法
...mapMutations(['addAge'])，
//通过 mapActions辅助函数简化，调用 getUserInfo()请求方法
...mapActions(['getUserInfo'])
},
}
</script>
//1. computed: mapState(['name', 'age']) 相当于下面
computed: {
name() { return this.$store.state.name},
age() { return this.$store.state.age }
}
//2. 如果computed中有另外自定义计算属性、用es6的扩展运算符、
例如：
computed: {
val() {},
...mapState(['name', 'age'])
}
//3. mapGetters('[val]')相当于下面
val() {
this.$store.getters.val
}
//4. mapMutations(['addAge']) 相当于下面
addAge() {
//这里调用 mutations中定义的 addnum()方法,调用时最好写成对象形式可以传递更多信息
this.$store.commit('addnum', { number: 5 })
}
//5. mapActions(['getUserInfo']) 相当于下面
getUserInfo() {
this.$store.dispatch('getUserInfo')
}
在实际开发当中，state里面的属性值是空的，当登录以后，再进行获取对应的信息。
登录以后，需要得到用户信息，那如何得到呢？
首先进入页面的时候调用actions中的getUserInfo方法
例如：
created(){ this.getUserInfo() }
methods:{ ...mapActions(['getUserInfo']) }
总结：
① 依赖state得到新的数据，用getters（跟computed一样，只读）
② 修改state的属性值，就用mutations（同步操作）
mixins (区别于vuex、mixins中一个组件修改了数据，其他组件获取到这个数据还是最开始没修改之前的值)
场景：解决项目中多出代码复用的情况
#局部引入mixins
1.src下新建文件夹mixins下创建index.js
里面写组件script中定义的data、computed、watch、methods、created等复用的代码
export const showMixin = {
data() { return { num: 2 } },
methods: { console.log('123') }
}
2.在其他组件引入
import { showMixin } from '@/mixins/index'
export default {
mixins: [showMixin]
}
注意：
1.如果组件 data中定义了和 mixins相同的属性、会以组件数据优先
2.如果有同名的方法名、两个都会被调用、混入的方法先调用、组件自身的方法后调用
#全局引入
main.js中
Vue.mixin({
created() {
const options = this.$option.myoption
if () { console.log(myoption) }
}
})
new Vue({
option: { myoption: 'test' },
render: h => h(App),
}).$mount('#app')
标签：getUserInfo,computed,区别,age,mixins,state,vuex,store 来源： https://www.cnblogs.com/EmbraceT/p/15392944.html