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



//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')