vuexState 总结

vuexState 总结

  • 安装vuex
  • 命令 npm install vuex --save
  • 使用的过程
  • 在vue项目的src文件夹下创建一个store文件
  • 在store文件中创建一个js文件
  • 在js文件中写入
//  引入vuex并且在vue中使用
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//  创建vuex实例化对象
const store = new Vuex.Store({
   state: {
       // 可以写自己想要存储的数据 数据可以是js的任何数据类型 数据不会存储在浏览器中
       userInfo: {
           name: '',
           id: '',
           tel: '',
           sex: ''
       }
   }
})
export default store

在vue文件中使用store中存储的数据

  • 要把store仓库挂载在vue的实例化对象中
  • 在main.js中引入 store文件夹中的js文件
//  例如
import store from 'js文件地址'
new Vue({
    store
})
  • 在要使用vuex中数据的vue文件中引入数据 以上述userInfo数据为例

第一种

  • 直接使用
   <template>
       <div>   
           {{$store.state.userInfo.name}}
       </div>
   </template>

第二种写法

  • 利用计算属性
    <template>
        <div>   
            {{getName}}
        </div>
    </template>
   export default {
       data() {
           return {}
       },
       computed: {
           // 利用计算属性
           getName() {
               return this.$store.state.userInfo.name
           }
       }
   }

第三种方法

  • 利用mapState辅助函数
   <template>
       <div>   
           {{userInfo.name}}
       </div>
   </template>
import { mapState } from 'vuex'
   export default {
       data() {
           return {}
       },
       computed: {
           ...mapState([
               'userInfo'
           ])
       }
   }
发布了22 篇原创文章 · 获赞 0 · 访问量 186
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 数字20 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览