Vue初探(一)——vuex

vuex的核心是store(仓库)，可以管理全局状态state，state的存储是响应式的，不能直接改变store中的状态，必须显式的提交mutation，可以方便的跟踪全局状态的变化

• vuex的使用

1. 可以在项目目录下建立store文件夹，文件夹下建立store.js文件，在其中定义需要的state和mutations等

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

const s = {
    state: {
        data: {}
    },
   mutations: {}
};

export default new Vuex.Store {
    ...s
}

2. 也可在store.js中引入其他模块的文件，如moduleA.js（文件中定义了该模块下的state和mutations等）

//moduleA.js
let state = {
    dataA: []
}

let mutations = {
    methodA (state, ip) {
    }
}
export default {
    state,
    mutations
}

再在store.js中引入模块

// store.js
import moduleA from './store/moduleA'

//在之前的...s之外加上模块
export default new Vuex.Store({
    ...s,
    modules: {
        moduleA
    }
});

3. 在需要使用vuex的地方引入state，mutations(使用mapState，mapMutations辅助函数)

<script>
import { mapState, mapMutations } from 'vuex'

export default {
    computed: {
      // 模块中的state好像必须用{}语法，默认情况下mutations等放入全局，state是在模块下的
        ...mapState({
            dataA: state => state.moduleA.dataA
        })
     // 若是全局的state，可用[]语法
        ...mapState([
            'data'
        ])
    },
    methods: {
        ...mapMutations([
             'methodA'
        ])
    }
}
</script>

4. 进阶：mutations中的方法名改为字符串，将mutations中的方法名都单独存在一个mutations-type.js文件中,方便多人协作时，对改变全局状态的mutations一目了然

//moduleA.js
import * as TYPES from './mutations-type'

let mutations = {
    [TYPES.ADD_ONE](state) {
    }
}

mutations-type.js中将字符串方法名定义为变量

export const ADD_ONE = 'ADD_ONE'

在用到mutations方法的组件中, 引入方法名变量并使用

// componentA
import { ADD_ONE } from '@/store/mutations-type'

export default {
        ...mapMutations({
            addIp: ADD_ONE
        })
    }
}
</script>

5. 使用vuex中踩的小坑：
   在state中定义了一个对象数组，在mutations中的方法改变该数组时，用了lodash的_.remove() ，想从对象数组中删除某个对象，再用删除后的state中的数组渲染dom。
   发现删除一个对象后, vuex的数组确实改变了，但不能重新渲染dom，说明没有响应式的改变数组，最后将remove方法改成splice删除对象，就可以正常渲染了。
   通过这个小坑，说明改变vuex中的数组等复杂类型数据，最好是pop，push， shift，splice这样响应的改变，值得注意！！