vuex基本使用方法

vuex使用第一步，下载安装

cnpm install vuex --save

第二步，引入

新建一个store.js文件，然后在里边引入vue和vuex，并且定义一个数据

store.js

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

Vue.use(vuex)
export const store = new vuex.Store({
    state: {
        arr = [
            {name: 'heni', price: 100},
            {name: '韩梅梅', price: 30},
            {name: '晓东', price: 20}
        ]
    }
})

第三步：在main.js中引入store

先引入store，然后在vue实例上添加一个store属性，值为引入的store

main.js

import {store} from '@/components/vuex/store.js'

new Vue({
  store: store,    // 新增store属性，值就是引入的那个store对象
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

这样就全局引入了vuex，后面就可以在其它组件中使用了。

 

第四步：在组件中获取数据

新建c1.vue和c2.vue组件，然后分别获取store里面的数据

c1.vue

<template>
    <div>
        <div v-for="item in getData">
            <span>{{ item.name }}</span>
            <span>{{ item.price }}</span>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {

        }
    },

    computed: {
        getData() {
            return this.$store.state.arr
        }
    }
}
</script>

<style scoped>

</style>

页面数据已经显示出来了

其实在其它组件中使用的方法都是一样的，这里不重复了。

还有其它方法，后面有时间再写出来，今天比较晚了。