首先打开vuex的官方文档，看看这张图
vuex.png
mutations是提交修改store的状态的唯一方法。每个mutation都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)，回调函数就是我们改变state的方法。
actions跟mutations差不多，但是action不直接修改state，它是提交到mutation上让mutation来修改state。要记住mutation是唯一可以修改state的。actions跟mutation的区别是 mutation必须限定是同步操作，而actions没有这个限制，如果你需要异步操作或调用异步API，你可以通过actions来进行操作。
state 其实就是保存状态的地方。修改了state，页面会自动更新所有引用到state的内容。
理论上，搞懂上面的就可以进行一些基本的操作了。
所以接下来就是进行一些简单的例子
首先我们需要安装vuex
npm install vuex --save
npm install es6-promise --save //做兼容，vuex依赖于promise，部分浏览器没有实现的promise，没错，就是万恶之源IE.....
因为如果项目有一定规模之后，如果所有store都写在单组件文件上，会显得很乱很蛋疼，不方便维护管理。所以我们可以在src目录下创建一个store目录，专门用于管理状态。在store目录下创建index.js
import Vue from 'vue'
import 'es6-promise/auto' //引用依赖
import Vuex from 'vuex'
Vue.use(Vuex) //使用vuex插件
当项目比较大规模的时候，所有的东西都写在index上也会显得很臃肿。所以我们再继续创建两个文件。state.js用于保存状态，mutation.js用来改变状态。然后在index.js导入这两个js文件。然后导出store
import Vue from 'vue'
import 'es6-promise/auto' //引用依赖
import Vuex from 'vuex'
import state from './state' //引用同目录下的state.js
import mutations from './mutations' //引用同目录下的mutations.js
Vue.use(Vuex) //使用vuex插件
export default new Vuex.Store({
state,
mutations
})
比如在页面上你需要保存你的登录名，你可以在state.js上这么写
let defaultUsername = '未登录' //定义一个默认的名字
//部分浏览器不支持localStorage会抛出异常，所以我们需要用try catch来获取异常，这样就不报异常了。
try {
if (localStorage.userName) { //localSrorage是HTML5的新东西，可以将数据保存在本地，类似于cookie，但是保存时间是永久
defaultUsername = localStorage.userName
}
} catch (e) {}
export default{
userName: defaultUsername //导出userName到index.js
}
在mutation.js上这么写
export default{
changeUsername (state, userName) { //改变userName的方法 ，userName是页面传过来的参数。
state.userName = userName //改变state中的userName
try {
localStorage.userName = userName //本地存储userName
} catch (e) {}
}
}
写到这里忽然想起好像没说为啥要用localStorage......因为js是运行在内存中，页面F5刷新之后内存被释放然后重新加载js代码，所以这时你的vuex的数据也会被清除....所以你需要用localStorage去进行本地存储一下
写完了store之后改怎么在页面上使用。
在入口文件main.js中导入store，一定要记得导入，不然谁认识你store是哪位
import store from './store/index.js'
然后还要注册一下
new Vue({
el: '#app',
router,
store, //引用
components: { App },
template: '<App/>'
})
这样我们才可以在页面上引用
//调用state里面的userName
<div>{{this.$store.state.userName}}</div>
刚才我们已经在mutation上定义好了一个改变state中userName的方法changeUsername
我们可以在方法中调用
...
methods: {
change (userName) {
this.$store.commit('changeUsername', userName) //commit是调用mutation的方法，同理dispatch是调用action的方法，可以看看上面那张图
}
}
这样就使用了vuex来管理状态了。
还有一种更加方便的方法去调用这些方法数据
在组件中引入
import { mapState } from 'vuex'
export default{
... //省略
computed: {
...mapState(['userName'])
},
}
这样我们就可以直接在页面上引用,不需要每次都写又长又臭的this.$store.state.userName
<div>{{this.userName}}</div>
同理mutation也一样
import { mapState, mapMutations } from 'vuex'
export default{
... //省略
methods: {
change (userName) {
this.changeUsername(userName)
},
...mapMutations(['changeUsername'])
},
}
vuex中还有两个属性 getter和 module
Getter属性跟computed计算属性差不多。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。这是一个官方的例子
const store = new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters: {
doneTodos: state => {
return state.todos.filter(todo => todo.done)
}
}
})
引用
store.getters.doneTodos // -> [{ id: 1, text: '...', done: true }]
Module属性是将store分成多个模块,防止store因为应用变得非常复杂时，store变得非常臃肿
官方例子
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
这样你可以将一种或者一类状态归为一个store进行分开管理，这样十分方便维护。
网友评论