好些年没在这儿发表过文章, 小来一发......
一, 安装 vuex
npm i vuex -D
二, 创建 vuex
在 src 目录下, 新建一个 store 目录, 并在其中建立 index.js
在 index.js 中写入
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex) // 实例化 vuex
- export default new Vuex.store({
- state: {
- content1: '内容 1'
- },
- actions: {
- // 读取要修改的数据, 调用 mutaions 中的方法
- },
- mutations: {
- // 改变 state 共享数据的内容
- }
- })
三, 引入到 vue 项目中
打开 main.js
import store from '@/store' // 如果名字为 index.js,vue 会自动寻找 index.js
在 new Vue({})中, 注入 store
- new Vue({
- el: '#app',
- router,
- store, // 这里为 store:store, 如果引入变量名为 store, 则不需写全格式
- components: { App },
- template: ''
- })
这样就可以全局使用 $store 方法了
四, 读取 store 的共享数据
打开组件 1
<div>{{this.$store.state.content1}}</div>
五, 修改 store 的共享数据
打开组件 2
比如点击某 dom, 将相应数据传递过去
- methods: {
- updataClick (obj) {
- this.$store.dispatch('自定义事件, 如 changeData', obj) // 为 store 派发一个自定义事件, 内容为 obj 的内容
- }
- }
打开 store/index.js
在 actions 中写入:
- actions: {
- changeData (context, data) {
- // context, 上下文, 名称随意
- // data 为获取要修改的数据, 名称随意
- // 函数名 changeData, 必须与组件 2 中, 自定义事件名称相同
- context.commit('updataStore', data) // 调用 mutations 中的函数, 并传入数据
- }
- }
在 mutations 中创建修改函数
- mutations: {
- updataStore (state, data) {
- // 参数一为 Vuex.store 下的 state 对象中的内容
- // 参数二为从 actions 传递来的数据
- this.state.content1 = data.name
- this.state.content2 = data.title
- }
- }
六, 其它
- <strong>6-1 vue 中, 用 js 跳转到某一页</strong>
- this.$router.push('/ 地址')
- <strong>6-2 本地储存 localStorage, 刷新页面后, 保存上一次操作的数据</strong>
- mutations: {
- updataStore (state, data) {
- this.state.content1 = data.name
- this.state.content2 = data.title
- try {
- localStorage.content1 = data.name
- localStorage.content2 = data.title
- // 注: 这里的 content1 和 2, 与 this.state.content1 并不是一个东西
- // 这里的 content1, 是存在本地储存中的变量名, 名称随意
- // 不写 try{}catch(err){}也是可以的, 但部分用户会开启隐身模式或者关闭本地储存
- // 一旦如此, localStorage 将失效, 并报错阻止程序继续运行, 使用 try 可规避这一点
- } catch (err) {}
- }
- }
关于默认数据的设置
- state: {
- content1: localStorage.content1 || '煮梦'
- // 如果有本地储存的数据, 则优先本地储存的数据, 没有则使用煮梦
- }
在这里, 也需要加上 try catch
在 export default 上方写入
- let stateContent1 = ''let stateContent2 =''
- try {
- stateContent1 = localStorage.content1 || '煮梦'
- stateContent2 = localStorage.content2 || '真他妈帅'
- } catch (err) {}
- export default new Vuex.store({
- state: {
- content1: stateContent1
- content2: stateContent2
- }
- })
- <strong>6-3 store 的高级用法</strong>
在四中, 获取 store 的方法为 this.$store.state.xxx, 过于臃肿, 因此有简便的方法
打开某组件
- import { mapState } from 'vuex' // mapState 是内置关键字, 不可改
- computed: {
- ...mapStore(['content1'])
- }
这样就可以直接 {{content1}} 了
mapState, 储存的是 store 中 state 对象内的数据.
... 为展开运算符, 在...mapState(['content1'])中, content1 为 store.state 对象里的属性名.
这里通过...mapState, 将 store.state 中的数据, 映射到 computed 计划属性的 content1 中, 也就是说, content1 即是 store.state 的属性, 此时又是 computed 自定义的计算属性名
demo http://vuex.zmblogs.com/#/
git 地址: git@github.com:ITcaptainli/vuex.git
来源: http://www.qdfuns.com/article/13003/652c3fb7191b60a68aafae5239582c0d.html