vuex的使用方式

vuex的安装

vue add vueX

在store中使用Vue.use(Vuex) 会在vue实列中添加一个$store

$store好比一个仓库，可以存储需要的数据

1export default new Vuex.Store({
2    state: {
3        name: 'huahua'
4    }
5})

组件获取name可以通过this.$store.state.name

组件内计算属性的简写

常规写法

1computed:  {
2    name () {
3        return this.$store.state.name
4    }
5}

导出vuex中的mapState

1import {mapState} from 'vuex';
2export default {
3    computed: {
4        //这个mapState返回的正好是一个个函数
5        ...mapState(['name','age','look'])
6    }
7}

如果有跟当前组件data中相同的属性名字，可以通过导出对象的方式处理,其他不重名依然可以使用上面数组的方式，或者直接手动重命名掉

1computed: {
2    ...mapState({
3    storeName:state => state.name
4  })
5}

页面中直接使用storeName，使用方式和data属性一样用法

getters

getters相当于组件内的computed,用于计算store中用户需要的值变化，通过getters计算重新返回一个新的值,

1export default new Vuex.Store({
2    getters: {
3        //这个person可以是由state中的name, age, apparance等组成,当这些属性值变化的时候，getters会自动计算
4        person (state) {
5            return ''
6        }
7    }
8})

person里面还可以传入第二个参数getters，通过getters参数可以获取当前getters里面所有的属性

1getters: {
2    person(state,getters) {
3        return ''
4    }
5}

组件中使用mapGetters获取store中的getters

1import {mapGetters} from vuex;
2
3export default {
4    computed: {
5        ...mapGetters(['person'])
6    }
7}

同样可以使用对象的方式

1import {mapGetters} from vuex;
2export default {
3    computed: {
4        ...mapGetters({
5            newPerson: 'person'
6        })
7    }
8}

⚠️mapGetters里面的对象写法上跟mapStates是不同的，getters对象写法只需要一个key:valuemapStates对象写法需要的是一个对象

store中的数据都是单向数据流

允许组件中使用this.$store.state.xxx的方式访问属性，不能通过其跟新属性值，需要mutation更改，如果在store中增加严格模式的限制， 这样是不允许的， 虽然可以操作

1export default new Vuex.Store({
2  //开发的时候可以开启，用来避免双向的写法，上线的时候需要去掉，一：没有意义，二 strict会深度检测，影响性能
3    //strict: true,
4  //在开发环境开启
5  strict: process.env.NODE_ENV !== 'production'
6})

mutations的使用

1mutation: {
2  //obj为参数
3    changeStuList (state,obj) {
4        state.stuList.push(obj)
5    }
6}

组件中的使用

1this.$store.commit('changeStuList',obj)

也可以通过mapMutations的方式处理

1import {mapMutations} from. 'vuex';
2export default {
3    methods: {
4        ...mapMutations(['changeStuList'])
5    }
6}

⚠️mutations里面不可以写异步，只可以写同步。因为异步执行的函数，将不属于mutation，那么操作的方式还是单向数据流的操作方式

action的使用

在action可以执行异步

action里面可以commit一个mutations，达到异步的目的

在action中的函数名字可以跟mutation的函数名字是一样的

 1actions: {
 2    //{commit}是上下文对象
 3    changeStuList({commit},obj) {
 4    //这里可以执行异步函数
 5        setTimeout(() => {
 6        这里的函数是mutation中的方法，
 7         commit('changeStuList',obj)
 8        },1000)
 9    }
10}

外部调用

1this.dispatch('changeStuList',obj)

同样可以使用mapActions

1methods: {
2    ...mapActions(['changeStuList'])
3}

通过modules区别模块

1import stu from './stu'
2Vue.use(Vuex);
3export default new Vuex.Store({
4    modules: {
5        stu,
6    }
7})

⚠️分模块后，获取属性需要加上模块的名称

1this.$store.state['模块名称'].['属性名称']

1//如果通过这种方式获取, 需要给模块加上命名空间的标示， 在模块增加 `namespaced: true`
2export default {
3    ...mapState('learn',['name'])
4}

如果给模块增加了namespaced: true,那么获取getters的时候也需要增加模块的名称

1export default {
2    computed: {
3        ...mapGetters('learn',['coursePrice'])
4    }
5}

commi和dispatach使用方式也需要增加模块名称

1methods: {
2    handleClick () {
3        this.$store.commit('learn/changePrice',{price:20})
4    }
5}

⚠️mutations, actions, getters,不需要通过模块名称， 会放到全局模块下，使用方式和之前一样