学习vuex

学习vuex

之前一直用vue+vue-router来开发前端，深深爱上这个框架，一直看到过vuex，但一直没用过，以为是个很复杂的东西，经过两晚上文档的阅读，发现这个vuex也是非常容易理解的东西，很符合vue的风格。

简单点说，vuex就是一个全局对象，用了它，我可以在任何一个子组件中访问这个全局对象的属性，这样应该就非常容易理解了。

首先就是安装vuex，这个不用多说

npm install vuex ---save

写个store.js

//store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    //这是严格模式，true后，如果应用不是通过mutation来修改state的属性就会抛错
    strict: process.env.NODE_ENV !== 'production',

    //这个state可以说就是全局对象的属性
    state:{
        count:0
    },

    //这个相当于vue的computed，计算属性
    getters:{
        count2(state){
            return state.count*2
        }
    },

    //这个可以说是store的事件，目的是修改state对象里面属性的值
    mutations:{
        increment(state){
            state.count++
        }
    },

    //这个可以说，怎么说呢，它里面是触发mutation的，但可以执行一些异步操作
    actions:{
        increment2(context){
            console.log('action')
            context.commit('increment')
        }
    },

    //这个可以这个理解，可以把一些属性分隔开集中
    modules:{
        account:{
            namespaced:true,
            state:{
                user:'caijt',
                name:'蔡锦钿'
            },
            getters:{
                isAdmin(){
                    return 'yes'
                }
            },
            mutations:{
                login(state){

                }
            },
            actions:{
                login(context){

                }
            }
        }
    }
})

然后在入口js

//main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store' //导入刚才创建的store.js

new Vue({
  el: '#app',
  router,
  store, //把store注册进vue
  components: { App },
  template: '<App/>'
})

在vue文件里面就可以这样使用了

//app.vue

<template>
    <div>
        {{count}}
        {{count2}}
        <button @click='increment'>自增加1</button>
        <button @click='increment2'>aciton自增加</button>
    </div>
</template>
<script>
//这是vuex的导入工具，不一定要用，但可以少写点代码
import { mapState,mapGetters,mapMutations,mapActions } from 'vuex'
    export default {
        name: 'App'
        data(){
            return {}
        },
        computed:{
            ...mapState(['count']),
            ...mapGetters(['count2']),
            ...mapState('acount',['user'])
        },
        methods:{
            ...mapMutations(['increment']),
            ...mapActions(['increment2']),
            ...mapMutations('account',['login'])
        }
    }
</script>

更详细的教程还是去看官网，这个目前对于我来说，能应用的地方就是后台登录后，把当前登录的用户姓名，账号等信息存储在这个store里，再写个注销、密码修改、姓名修改的action或者mutation之类的吧