介绍
Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间的数据共享
开始
安装
①直接下载方式
创建一个 vuex.js 文件 将https://unpkg.com/vuex这个网址里的内容放到该文件夹里。
②CND方式
- <script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>
③NPM方式
④Yarn方式
NPM方式安装的使用方式
1.在 scr 文件里创建一个 store / index.js 的文件夹，写入以下内容。
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
- export default new Vuex.Store({
- state: {},
- mutations: {},
- actions: {},
- modules: {}
- })
2.在main.js 里引入，然后挂载到 Vue 实例里
- import Vue from 'vue'
- import store from './store'
- new Vue({
- render: h => h(App),
- store
- }).$mount('#app')
store概念及使用
概念：
就是组件之间共享数据的。
只有 mutations 才能修改 store 中的数据
使用：
先定义后使用
定义
使用
方式1(推荐)
- <div>{{ numAlias }}</div>
-
- import { mapState } from 'vuex'
- export default {
- //计算函数
- computed: mapState({
- // 传字符串参数 'count' 等同于 `state => state.count`
- numAlias: 'num',//常用key是自己起的名随便 value接收的数据
- // 箭头函数可使代码更简练
- count: state => state.count,
- // 为了能够使用 `this` 获取局部状态，必须使用常规函数
- countPlusLocalState (state) {
- return state.count + this.localCount
- }
- //可以定义其余的计算函数
- }),
- //或者这样
- //计算函数
- computed: {
- mapState(['count'])
- }
- }
方式2
- <div>{{ $store.state.count }}</div>
mutations概念及使用
概念：
修改store里的数据，严格规定不能在其余的地方修改store的数据，mutations里不要执行异步操作。
mutation 必须同步执行,不能异步执行。
使用：
先定义方法后使用
定义
- mutations: {
- //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
- increment (state, parameter) {
- // 变更状态
- state.num++
- }
- }
使用
方式1(推荐使用)
- import { mapState, mapMutations } from 'vuex'
- //方法
- methods: {
- ...mapMutations([
- // mutations自定义的方法名
- 'increment'
- ]),
- love() {
- // 直接this调用 this.increment('需要传过去的数据,可不要')
- this.increment('Bin')
- }
- }
方式2
- methods: {
- love() {
- // this.$store.commit('自定义的名称', '传过去的数据,可不传')
- this.$store.commit('increment', 'data')
- }
- }
action概念及使用
概念：
用于处理异步操作。
如果通过异步操作变更数据，必须通过action，而不能使用mutation，但是在action中还是要通过触发mutation的方式间接变更数据。
Action 类似于 mutation，不同在于：
- Action 提交的是 mutation，而不是直接变更数据(状态)。
- Action 可以包含任意异步操作。
定义
- mutations: {
- //increment自定义方法 store参数是store数据, parameter参数是接收到的数据,可不要
- increment (state, parameter) {
- // 变更状态
- state.num++
- }
- },
- actions: {
- //add 自定义方法 context是参数，可以把它当作vuex的实例
- add(context) {
- //可以通过context.commit('mutations中需要调用的方法')
- context.commit('increment')
- }
- }
使用
方式1(推荐)
- import { mapState, mapMutations, mapActions } from 'vuex'
- export default {
- methods: {
- ...mapActions([
- 'add', // 将 `this.add()` 映射为 `this.$store.dispatch('add')`
- // `mapActions` 也支持载荷：
- 'add' // 将 `this.add(amount)` 映射为 `this.$store.dispatch('add', amount)`
- ]),
- ...mapActions({
- add: 'add' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
- }),
- love() {
- // 直接this调用 this.add('需要传过去的数据,可不要')
- this.add(data)
- }
- }
- }
方式2
- methods: {
- love() {
- // this.$store.dispatch('自定义的名称', '传过去的数据,可不传')
- this.$store.dispatch('add', data)
- }
- }
getters概念及使用
概念：
getter用于对store中的数据进行加工处理形成新的数据。getting可以对store中已有的数据加工处理之后形成新的数据，类似Vue的计算缩写。
定义
- state: {
- num: 0
- },
- getters: {
- doneTodos: state => {
- return state.num = 10
- }
- }
使用
方式1(推荐)
- <div>{{ doneTodos }}</div>
-
- import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
- export default {
- //计算函数
- computed: {
- ...mapState(['count']),
- ...mapmapGetters(['doneTodos'])
- }
- }
方式2
- <div>{{ $store.getters.doneTodos }}</div>
总结
本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注w3xue的更多内容!
经验首页