vue小项目总结与笔记【七】——vuex实现数据共享

vuex简单的理解就是你在state中定义了一个公共数据之后，你可以在所在项目中的任何一个组件里进行获取、修改，并在全局调用更改后的数据。下面简单记录一下vuex的使用吧。

首先惯例安装：

npm install vuex --save

然后在src文件目录下新建一个名为store的文件夹，为方便引入并在store文件夹里新建一个index.js,里面的内容如下:

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

Vue.use(Vuex)

export default new Vuex.Store({
    state
})

然后在main.js里面引入，并全局注入：

import store from './store'


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

之后就可以在所有组件里使用this.$store了。

使用：

假设我们在store里面定义一个变量city：

export default new Vuex.Store({
    state: {
        city: ''
    }
})

我们需要在一个组件里用它，就用 this.$store.state.city 就可以了，例：

<div class="button">{{this.$store.state.city}}</div>

如果要改变公共数据，可以用 this.$store.commit（‘change’， city）这样派发一个叫做‘change’的事件，传的参数为city，在store/index.js里用mutations接收

    handleCityClick (city) {
            this.$store.commit('change',city)
        },

export default new Vuex.Store({
    state: {
        city: ''
    },
    mutations: {
        change (state, city) {
            state.city = city
        }
    }
})

这样就可以改变了state里的city。

当store/index.js下的文件变多时，需要作进一步的拆分，如：

import Vue from 'vue'

import Vuex from 'vuex'

　 Vue.use(Vuex)

let defaultCity = '广州'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}
export default new Vuex.Store({
    state: {
        city: defaultCity 
    },
    mutations: {
        change (state, city) {
        state.city = city
        try {
            localStorage.city = city
        } catch (e) {}
    }
    }
})

可以这样，在store下新建一个state.js 和 mutations.js文件，

state.js：

let defaultCity = '广州'
try {
  if (localStorage.city) {
    defaultCity = localStorage.city
  }
} catch (e) {}

export default {
    city: defaultCity
}

mutations.js：

export default {
    changeCity (state, city) {
        state.city = city
        try {
            localStorage.city = city
        } catch (e) {}
    }
}

这时候index.js可以写成这样：

import Vue from 'vue'
import Vuex from 'vuex'
// 引入这两个文件
import state from './state'
import mutations from './mutations'

Vue.use(Vuex)

export default new Vuex.Store({
    // es6语法   键名和键值一样时，可以只写一个
    state,
    mutations
})

最后，this.$store.state.city 太过于繁杂，使用起来不方便，可以用到 mapState 这个API，使用方法：

先引入：

import { mapState } from 'vuex'

在computed（计算属性）里写：

computed: {
         // 展开运算符
        ...mapState({
            // 将this.$store.state.city 映射到 currentCity，就可以使用this.currentCity代替 this.$store.state.city       
            currentCity: 'city'
        })
    }

另一个API mapMutations可以映射方法的，如：

同样需要先引入

import {  mapMutations } from 'vuex'

methods: {
        handleCityClick (city) {
            this.changeCity(city) 
        },
        // 将一个mutations叫做changeCity，把它映射到一个叫做changeCity的方法里，this.changeCity(city)可以替换之前的this.$store.commit('changeCity',city)
        ...mapMutations(['changeCity'])
    },

以上是vuex的基本用法。

vue小项目总结与笔记【七】——vuex实现数据共享

猜你喜欢